浏览器是如何进行页面渲染的？重绘与回流

浏览器是如何进行页面渲染的？

1. 解析（Parser）HTML，生成 DOM 树（DOMTree）
2. 同时解析 CSS ，生成样式规则（Style Rules）
3. 根据 DOM 树和样式规则，生成渲染树（RenderTree）
4. 进行布局 Layout（回流 / 重排）：根据生成的渲染树，得到节点的几何信息（位置、大小）
5. 进行绘制 Painting（重绘）：根据计算和获取的信息进行整个页面的绘制
6. Display：展示在页面上

重绘和回流

回流（重排）

当 RenderTree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流

• 影响到布局了，就会有回流

• 会导致回流的操作

  1. 页面的首次刷新

  2. 浏览器的窗口大小发生改变

  3. 元素的大小或位置发生改变

  4. 改变字体的大小

  5. 内容的变化（如：input 的输入，图片的大小）

  6. 激活 css 伪类（如：:hover）

  7. 脚本操作 DOM（添加或者删除可见的 DOM 元素）

重绘

由于节点样式的改变并不影响它在文档流中的位置和文档布局时（比如：color、background-color、outline 等），称为重绘

• 影响到样式了，就会有重绘

划重点：重绘不一定引起回流，而回流一定会引起重绘

案例

let s = document.body.style
s.padding = "2px" // 回流 + 重绘
s.border = "1px solid red" // 再一次回流 + 重绘
s.color = "blue" // 再一次重绘
s.backgroundcolor = "#ccc" // 再一次重绘
s.fontSize = "14px" // 再一次回流 + 重绘