重绘 ( Repaint) 和回流 ( Reflow)

首先了解重绘 ( Repaint) 和回流 ( Reflow)其实是关乎到浏览器性能的问题
重绘和回流是渲染步骤中的⼀⼩节，但是这两个步骤对于性能影响很大
重绘和回流的过程都需要浏览器耗费大量的计算资源，过多的使用会导致网页性能下降

区别

重绘是当节点需要更改外观而不会影响布局的，比如改变一个div的background颜色就叫称为重绘

重绘：是指更改一部分的元素的外观，不涉及布局的改变，性能消耗较小。

回流是布局或者属性需要改变就称为回流

回流：是指页面布局的改变，需要重新计算元素的属性，性能消耗较大。

在这里插入图片描述

重绘和回流关系

回流必定会发生重绘，重绘不⼀定会引发回流。回流所需的成本比重绘高的多，改变深层
次的节点很可能导致父节点的⼀系列回流

个人理解：回流的时候整个页面都会发生改变而回流只是页面里面一些元素的外观改变所以
回流一定会引起页面元素的外观重新渲染或者改变也就是（重绘）
而重绘只是更改元素的外观并不会影响整个页面

可能会引起重绘和回流的事件：

改变 window 大⼩
改变字体
添加或删除样式
文字改变
定位或者浮动
盒模型
亿点小知识：很多人不知道的是，重绘和回流其实和 Event loop 有关。
当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。- 因为浏览
器是 60Hz 的刷新率，每 16ms 才会更新⼀次
然后判断是否有 resize 或者 scroll ，有的话会去触发事件，所以 resize 和
scroll 事件也是至少 16ms 才会触发⼀次，并且自带节流功能。
判断是否触发了 media query
更新动画并且发送事件
判断是否有全屏操作事件
执行 requestAnimationFrame 回调
执行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载
上，但是兼容性不好
更新界面

以上就是⼀帧中可能会做的事情。如果在⼀帧中有空闲时间，就会去执行
requestIdleCallback 回调。

优化性能和减少重绘和回流：

使用 translate 替代 top

< div class="dome"> < /div>
<style>
.dome{
position: absolute;
top: 20px;
background: red;
}
</style>
<script>
setTimeout(() => {
// 会引起回流
document.querySelector( '.dome').style.top = '50px'
}, 1000)
</script>