优化关键渲染路径

Ilya Grigorik

发布时间：2014年3月31日

为了尽可能快地实现首次渲染时间，我们需要最大限度地减少三个变量

  • 关键资源的数量。
  • 关键路径长度。
  • 关键字节的数量。

关键资源是指可能阻止页面初始渲染的资源。这些资源越少，浏览器、CPU 和其他资源的工作就越少。

同样，关键路径长度是关键资源及其字节大小之间依赖关系图的函数：某些资源下载只能在处理完之前的资源后才能启动，并且资源越大，下载所需的往返次数就越多。

最后，浏览器需要下载的关键字节越少，它就能越快地处理内容并将其渲染在屏幕上。为了减少字节数，我们可以减少资源数量（消除它们或使其变为非关键资源），并通过压缩和优化每个资源来确保最大限度地减少传输大小。

优化关键渲染路径的一般步骤顺序是

  1. 分析和描述您的关键路径：资源数量、字节数、长度。
  2. 最大限度地减少关键资源的数量：消除它们、延迟它们的下载、将它们标记为异步以及其他重要考虑因素。
  3. 优化关键字节的数量以减少下载时间（往返次数）。
  4. 优化剩余关键资源的加载顺序：尽早下载所有关键资产以缩短关键路径长度。

反馈