重排和重绘

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

回流 / 重排（reflow）

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

会导致回流(重排)的操作:

• 页面的首次刷新
• 浏览器的窗口大小发生改变
• 元素的大小或位置发生改变
• 改变字体的大小
• 内容的变化(如:input框的输入，图片的大小)
• 激活css伪类 (如::hover)
• 脚本操作DOM(添加或者删除可见的DOM元素)

简单理解影响到布局了，就会有回流

重绘（Repaints）

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如: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'        // 再次重排 + 重绘