05-3 白屏优化？

阶段一（原来的页面）：发起主页面 HTML 请求后、网络进程拿到数据喂给 渲染进程 前

阶段二（解析白屏）：渲染进程 拿到数据后，会创建一个 空白页面 ，然后等待 css 和 js 文件加载完成 -> 先生成 CSSOM -> 执行 js -> 合成布局树 -> 首次渲染

阶段三（新页面）：首次渲染完成后，进入完整页面的生成阶段

1. 『DNS解析优化』：针对DNS Lookup 环节，我们可以针对性的进行 DNS 解析优化
- DNS 缓存优化
- DNS 预加载策略
- 稳定可靠的DNS服务器
1. TCP网络链路优化：针对网络链路的优化，好像除了花钱没有什么更好的方式！
1. 服务端处理优化：服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…

根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：

1、html：尽可能的精简 HTML 的代码和结构（HTML 层级不要太深）
2、 CSS：
- 选择器是从右向左解析，所以尽可能减少层级
- 用 link 别用 @import（@import 是延迟加载，遇到了代码才加载，预解析的时候不能提前加载）
- 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件
3、js：
- 合理的放置JS代码，尽量不要使用内联的 JS 代码
  - 『没有 defer 和 async 标签的 script 会立即加载并执行 - js 执行阻断 html 解析』
    - 有 async 标签的 js - js 的加载和 html 的解析和渲染并行，加载完即执行，在页面的onload事件前执行
    - 有 defer 标签的 js - js的加载和 html 的解析和渲染并行，但会在 html 解析完成后执行，在触发 DOMContentLoaded 事件前执行
4、减少文件大小：比如通过 webpack 等工具移除一些不必要的注释，并压缩 JavaScript 文件
5、减少 HTTP 请求次数和请求大小