05-3 白屏优化？

注意：这里直接给出方案，具体白屏过程解析请看上一篇博文

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

针对DNS Lookup 环节，我们可以针对性的进行 DNS 解析优化

针对网络链路的优化，好像除了花钱没有什么更好的方式！

服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…

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

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