关键渲染路径

[zoro-web]

关键渲染路径(Critical Rendering Path)

浏览器从开始请求 HTML 文档， 到首次渲染到屏幕上（首屏）， 背后需要做很多的事情， 这一连串事情就是 CRP 。 开发 app 的时候很多优化都是和缩短 CRP 有关的。 缩短 CRP 的长度能够有效降低首屏时间。 这也是理解 CRP 最大的好处。

浏览器渲染原理

1. 浏览器解析 HTML 形成 DOM 树。
2. 浏览器解析 CSS 代码输出 CSSOM 。
3. DOM 和 CSSOM 一起构造出一颗 Render Tree 。
4. 浏览器对 Render Tree 上的节点计算精确位置（布局）。
5. 使用 Render Tree 绘制 (Painting) 到屏幕上。

关于 CRP 中几个关键的时间点

1. domLoading 这是整个 CRP 的开始的时间点。
2. domInteractive 游览器刚好构建完 DOM 的时间点。
3. domContentLoaded 表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点。意思就是当没有脚本文件执行的时候， DOM 构建完成时就到达这个时间点， 毕竟没有脚本需要执行怎么会存在阻塞呢？ 不过这种情况很少见。 当有脚本文件要执行的时候， 样式（ CSSOM ）会阻塞脚本文件执行， 此时要等到样式全部就绪的时候才会到达这个时间点。 所以， 当存在脚本文件的时候， 一般 domContentLoaded 会往后推移许多。
4. domCompelete 表示所有资源都已经下载完成， 包括图片， 字体等。 这个时间点将触发 onload 事件。

CRP评估和分析

* CRP评估
1. 使用 Lighthouse 审核页面
2. 使用 Navigation Timing API 记录关键时间点

* CRP分析--分析三种可变因素
1. 关键资源： 可能阻止网页首次渲染的资源。
2. 关键路径长度： 获取所有关键资源所需的往返次数或总时间。
3. 关键字节： 实现网页首次渲染所需的总字节数，它是所有关键资源传送文件大小的总和。

CRP优化

1. 最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。
2. 优化关键字节数以缩短下载时间（往返次数）。
3. 优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度。

* 优化方法：
1. CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。所以需要精简CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞（备注：“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。浏览器仍会下载 CSS 资产，只不过不阻塞渲染的资源优先级较低罢了。）  
2. 避免使用 CSS import
3. 内联阻塞渲染的 CSS
4. 让 JavaScript 异步执行（async、defer），并去除关键渲染路径中任何不必要的 JavaScript
5. 按需加载JavaScript，延迟任何非必需的脚本

问题

如今HTTP2已经支持多个请求同时并发了，还有没有必要对静态文件进行打包？

参考

https://developers.google.com/web/fundamentals/performance/critical-rendering-path