浏览器CRP-关键渲染路径-MDN文档学习笔记

关键渲染路径

查看更多学习笔记：GitHub：LoveEmiliaForever
MDN中文官网

关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列
优化关键渲染路径可以缩短首次渲染的时间，了解和优化关键渲染路径对于确保重排和重绘可以每秒 60 帧的速度进行，以确保高效的用户交互并避免卡顿是很重要的

理解CRP

Web 性能包含了服务器请求和响应、加载、执行脚本、渲染、布局和绘制每个像素到屏幕上

DOM

DOM 构建是增量的：HTML 响应变成标签，标签变成节点，而节点又变成 DOM 树
节点数量越多，关键渲染路径中的后续事件将花费的时间就越长

CSSOM

CSSOM 包含了页面所有的样式，也就是如何展示 DOM 的信息
CSS 是渲染阻塞的：浏览器会阻塞页面渲染直到它接收和执行了所有的 CSS
CSS 是渲染阻塞是因为规则可以被覆盖，所以直到文件接收完成才能得到正确结构
CSSDOM 随着 CSS 的解析而被构建

更少的特定选择器比更多的特定选择器要快
如.first {}快于.first .second {}
更具体的规则更昂贵因为它必须遍历更多的 DOM 树节点，但这所带来的额外的消耗通常很小

渲染树

渲染树包括了内容和样式：DOM 和 CSSOM 树结合为渲染树
为了构造渲染树，浏览器检查每个节点，从 DOM 树的根节点开始，并且决定哪些 CSS 规则被添加
渲染树只包含了可见内容，也就是说对可视化页面有影响才会被渲染

布局

一旦渲染树被构建，布局变成了可能
布局取决于屏幕的尺寸，布局这个步骤决定了在哪里和如何在页面上放置元素，决定了每个元素的宽和高，以及他们之间的相关性

视窗的元标签定义了布局视窗的宽度，从而影响布局
没有的话，浏览器使用视窗的默认宽度，默认全屏浏览器通常是 960px

布局性能受 DOM 影响——节点数越多，布局就需要更长的时间
20ms 的延迟在加载或者方向改变时或许还可以接受，但在动画或滚动时就会迟滞
任何渲染树的改变都会导致布局的发生
为了减小布局事件的频率和时长，应该批量更新或者避免改动盒模型属性

绘制

一旦渲染树创建并且布局完成，像素就可以被绘制在屏幕上
加载时，整个屏幕被绘制出来，之后只有受影响的屏幕区域会被重绘
浏览器被优化为只重绘需要绘制的最小区域

绘制时间取决于何种类型的更新被附加在渲染树上
绘制是一个非常快的过程，所以聚焦在提升性能时这通常不是最有效的部分

测量动画帧需要的时间时主要需要考虑到布局和重绘的时间

优化CRP

• 通过异步、延迟加载或者消除非关键资源来减少关键资源的请求数量
• 优化必须的请求数量和每个请求的文件体积
• 通过区分关键资源的优先级来优化被加载关键资源的顺序，来缩短关键路径长度