重绘和回流

重绘和回流

重绘（repaint）
重绘是是改变某个元素的背景色、文字颜色等不影响它周围或内部布局。就是元素的几何尺寸和位置未发生改变。
visibility：hidden属性是隐藏元素，但元素仍然占据着布局空间。所有触发的是重绘。

回流（reflow)
当页面布局发生和几何信息发生变化时，需要回流。以下会发生回流：

• 激活伪类,如hover
• 改变dom树的增删元素操作
• 改变元素位置和尺寸大小
• 浏览器窗口尺寸改变
• 文本内容改变或者图片被不同尺寸图片替代。

浏览器优化机制

回流一定会触发重绘，而重绘不一定绘回流。回流会导致渲染树重新计算，开销比重绘大。
现在的大多浏览器会通过队列化修改批量执行来优化回流过程。浏览器会将修改操作放入到队列中，直到一段时间或者操作达到一个阈值，才清空队列。当你获取布局信息的操作时，会强制队列刷新。

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()

减少回流和重绘

其他
defer

script设置了defer属性，浏览器会异步加载js文件，不会影响DOM树的构建，等到dom树构建完后再开始执行。如果有多个设置了defer的script标签存在，则会按顺序执行所有的script。

async

script设置了async属性，浏览器会异步加载js文件，不影响DOM树构建，js加载完毕后会立刻执行。如果有多个设置了async的script标签存在，不考虑顺序，哪个js文件先加载完就执行哪个js文件。

图片来自：https://www.cnblogs.com/maxiag/p/13415961.html