Skip to content

Latest commit

 

History

History
39 lines (24 loc) · 2.37 KB

关键渲染路径.md

File metadata and controls

39 lines (24 loc) · 2.37 KB

关键渲染路径(浏览器渲染机制)

关键渲染路径(Critial Rendering Path,CRP)是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。

优化关键渲染路径可提高渲染性能

关键渲染路径包含了文档对象模型(DOM)、CSS 对象模型(CSSOM)、渲染树和布局。

关键渲染路径可以分为以下五步

  • 构建 DOM 树
  • 构建 CSSOM 树
  • 创建渲染树
  • 生成布局
  • 绘制

在解析 HTML 时会创建 DOM。HTML 可以请求 JavaScript,而 JavaScript 反过来,又可以更改 DOM。HTML 包含或请求样式,依次来构建 CSSOM。浏览器引擎将两者结合起来以创建渲染树。布局确定页面上所有内容的大小和位置。确定布局后,将像素绘制到屏幕上。

这些只是简短的概况了这部分流程,详细内容查看最后。

优化 CRP

提升页面加载速度需要通过被加载资源的优先级、控制它们加载的顺序和减小这些资源的体积。

性能提示包含:

  1. 通过异步重要资源的下载来减小请求数量
  2. 优化必须的请求数量和每个请求的文件体积
  3. 通过区分关键资源的优先级来优化被加载关键资源的顺序,来缩短关键路径长度。

另外,可以阅读一下网站性能优化 — CRP这篇文章。

以上关于 CRP 的详细步骤内容可查阅 MDN Docs:Critical rendering pathGoogle 的 Critical Rendering Path

更多资料