CRP（关键渲染路径Critical Rendering Path）优化

关键渲染路径是浏览器将 HTML、CSS、JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。也就是我们刚刚提到的的的浏览器渲染流程。
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素:

  1. * 关键资源的数量: 可能阻止网页首次渲染的资源。
  3. * 关键路径长度: 获取所有关键资源所需的往返次数或总时间。
  5. * 关键字节: 实现网页首次渲染所需的总字节数，等同于所有关键资源传送文件大小的总和。

优化 DOM

  1. * 删除不必要的代码和注释包括空格，尽量做到最小化文件。
  3. * 可以利用 GZIP 压缩文件。 
  5. * 结合 HTTP 缓存文件。

优化 CSSOM

首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。
然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。

  1. * 减少关键 CSS 元素数量
  3. * 当我们声明样式表时，请密切关注媒体查询的类型，它们极大地影响了 CRP 的性能 。

优化 JavaScript

当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。

  1. * async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
  3. * defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
  5. * 当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
  7. * 预加载 —— preload & prefetch 。
  9. * DNS 预解析 —— dns-prefetch 。

小结

  1. * 分析并用 **关键资源数 关键字节数 关键路径长度** 来描述我们的 CRP 。
  3. * 最小化关键资源数: 消除它们（内联）、推迟它们的下载（defer）或者使它们异步解析（async）等等 。
  5. * 优化关键字节数（缩小、压缩）来减少下载时间 。
  7. * 优化加载剩余关键资源的顺序: 让关键资源（CSS）尽早下载以减少 CRP 长度 。

—————————————————————————————————————————————————
原文链接：https://segmentfault.com/a/1190000022018051
原文链接：https://zhuanlan.zhihu.com/p/115047733