重绘 ( 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>
- 使用 visibility 替换 display: none ， 因为前者只会引起重绘，后者会引发回流
( 改变了布局) - 避免使用table布局
- 避免设置多层内联样式，避免节点层级过多
- 避免使用css表达式
以上就是重绘 ( Repaint) 和回流 ( Reflow)感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…