优化关键渲染路径CRP

时间：2021-09-09 15:00:19

什么是关键渲染路径？

从收到 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. 脚本放到最底部

相关文章