回流(reflow)与重绘(repaint)

1. 了解浏览器的渲染机制

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

2. 回流

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

会导致回流（重排）的操作：

• 页面的首次刷新
• 浏览器的窗口大小发生改变
• 元素大小或位置发生改变
• 改变字体的大小
• 内容的变化（如：input框的输入，图片的大小）
• 激活css伪类（如：hover）
• 脚本操作DOM（添加或者删除可见的DOM元素）
• 元素脱离标准流（浮动、绝对定位、固定定位）

简单理解：影响到布局了，就是回流

3. 重绘

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

 重绘不一定引起回流，而回流一定引起重绘

const s = document.body.style
s.padding = '2px' // 回流 + 重绘
s.border = '1px solid #ccc' // 再一次 回流 + 重绘
s.color = 'blue' // 再一次重绘
s.backgroundColor = '#ccc' // 再一次重绘
s.fontSize = '14px' // 再一次 回流 +重绘

4. 性能影响

总结：回流的性能消耗要比重绘大，在开发中尽量避免回流与重绘的发生。

5. 性能优化

• 避免使用table布局
• 避免设置多层内联样式
• 避免频繁操作DOM
• 对于大量插入DOM的操作，建议使用文档片段，也就是DocumentFragment