首先了解 重绘 ( 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)感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
