优化关键渲染路径CRP

什么是关键渲染路径？

从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程当中有一些中间步骤

浏览器渲染页面前须要先构建 DOM 和 CSSOM 树。所以，咱们须要确保尽快将 HTML 和 CSS 都提供给浏览器。

DOM 树与 CSSOM 树合并后造成渲染树。

有了渲染树，咱们就能够进入“布局”阶段。

布局完成后，浏览器会当即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。

阻塞渲染的CSS

默认状况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞。

CSS 是阻塞渲染的资源。须要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。

阻塞渲染的JS

为何script标签要放在底部？
咱们的脚本在文档的何处插入，就在何处执行。当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。

若是浏览器还没有完成 CSSOM 的下载和构建，而咱们却想在此时运行脚本，会怎样？

JavaScript 执行将暂停，直至 CSSOM 就绪。

阻止解析器

若是是外部 JavaScript 文件，浏览器必须停下来，等待从磁盘、缓存或远程服务器获取脚本，这就可能给关键渲染路径增长数十至数千毫秒的延迟

两个时间点

• DOMContentLoaded
  表示 DOM 准备就绪 许多 JavaScript 框架都会等待此事件发生后，才开始执行它们本身的逻辑
• Load
  每一个网页加载的最后一步，浏览器会触发 onload 事件

优化关键渲染路径的思路

1. 对关键路径进行分析和特性描述：资源数、字节数、长度。
2. 最大限度减小关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。
3. 优化关键字节数以缩短下载时间（往返次数）。
4. 优化其他关键资源的加载顺序：您须要尽早下载全部关键资产，以缩短关键路径长度。

优化CRP的方法

1. 使用window.performance.timing API来查看性能
2. 首屏内联CSS
3. 使用媒体查询优化CSS
4. JS脚本async异步
5. 减少CSS和JS的体积
6. 脚本放到最底部