浏览器是如何进行界面渲染的
回流 / 重排（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' // 再次重排 + 重绘