重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。
color
就叫称为重绘回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。
所以以下几个动作可能会导致性能问题:
很多人不知道的是,重绘和回流其实和 Event loop 有关。
以上就是一帧中可能会做的事情。如果在一帧中有空闲时间,就会去执行 requestIdleCallback
回调。
translate
替代 top
<div class="test"></div> <style> .test { position: absolute; top: 10px; width: 100px; height: 100px; background: red; } </style> <script> setTimeout(() => { // 引起回流 document.querySelector('.test').style.top = '100px' }, 1000) </script>
使用 visibility
替换 display: none
,因为前者只会引起重绘,后者会引发回流(改变了布局)
把 DOM 离线后修改,比如:先把 DOM 给 display:none
(有一次 Reflow),然后你修改 100 次,然后再把它显示出来
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
for (let i = 0; i < 1000; i++) { // 获取 offsetTop 会导致回流,因为需要去获取正确的值 console.log(document.querySelector('.test').style.offsetTop) }
requestAnimationFrame
本文作者:毛超颖
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!