关键渲染路径(Critial Rendering Path,CRP)是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。
优化关键渲染路径可提高渲染性能。
关键渲染路径包含了文档对象模型(DOM)、CSS 对象模型(CSSOM)、渲染树和布局。
关键渲染路径可以分为以下五步:
- 构建 DOM 树
- 构建 CSSOM 树
- 创建渲染树
- 生成布局
- 绘制
在解析 HTML 时会创建 DOM。HTML 可以请求 JavaScript,而 JavaScript 反过来,又可以更改 DOM。HTML 包含或请求样式,依次来构建 CSSOM。浏览器引擎将两者结合起来以创建渲染树。布局确定页面上所有内容的大小和位置。确定布局后,将像素绘制到屏幕上。
这些只是简短的概况了这部分流程,详细内容查看最后。
提升页面加载速度需要通过被加载资源的优先级、控制它们加载的顺序和减小这些资源的体积。
性能提示包含:
- 通过异步重要资源的下载来减小请求数量
- 优化必须的请求数量和每个请求的文件体积
- 通过区分关键资源的优先级来优化被加载关键资源的顺序,来缩短关键路径长度。
另外,可以阅读一下网站性能优化 — CRP这篇文章。
以上关于 CRP 的详细步骤内容可查阅 MDN Docs:Critical rendering path 和 Google 的 Critical Rendering Path