关键路径渲染 ​

Critial Rendering Path(CRP)

浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所执行的一系列步骤

浏览器渲染 ​

从浏览器渲染的过程进行理解以及渲染的优化步骤

DOM ​

CSSOM ​

Render Tree ​

Layout ​

Paint ​

优化 ​

• async defer 的使用
• 优化资源大小数量
• 减少关键资源的请求数量以及大小
• 设置关键资源的优先级