关于重绘和回流(Repaint & Reflow)

Posted 2022-08-05 cathy1024

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于重绘和回流(Repaint & Reflow)相关的知识，希望对你有一定的参考价值。

1. 浏览器渲染机制

浏览器采用流式布局模型（Flow Based Layout）
浏览器会把html解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。
有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

2. 重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。

3. 回流

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

<body>
<div class="error">
    <h4>我的组件</h4>
    <p><strong>错误：</strong>错误的描述…</p>
    <h5>错误纠正</h5>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</div>
</body>

在上面的HTML片段中，对该段落p标签回流将会引发强烈的回流，因为它是一个子节点。这也导致了祖先的回流。此外，<h5>和<ol>也会有简单的回流，因为其在DOM中的回流元素之后。大部分的回流将导致页面的重新渲染。

回流必定会发生重绘，重绘不一定会引发回流。

4.浏览器优化

应该避免频繁使用以下属性，它们都会强制渲染刷新队列。

offsetTop,offsetLeft,offsetWidth,offsetHeight
scrollTop,scrollLeft,scrollWidth,scrollHeight
clientTop,clientLeft,clientWidth,clientHeight
width,height
getComputedStyle()
getBoundingClientRect()

5.减少重绘和回流

1.CSS

使用transform替代top
使用visibility替换display:none,因为前者只会引起重绘，后者会引发回流（改变了布局）
避免使用table布局，可能很小的一个改动会造成整个table的重新布局
尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围。
避免设置多层内联样式，css选择符从右往左匹配查找，避免节点层级过多。
将动画效果应用到position属性为absolute或者fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流。同时，控制动画速度可以选择requestAnimationFrame。
避免使用css表达式，可能会引发回流。
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change,video,iframe等标签，浏览器会自动将该节点变为图层。
CSS3硬件加速(GPU加速)，使用CSS3硬件加速，可以让transform,opacity,filters这些动画不会引起回流重绘。

2.javascript

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性

避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

参考文章：https://github.com/sisterAn/blog/issues/33

以上是关于关于重绘和回流(Repaint & Reflow)的主要内容，如果未能解决你的问题，请参考以下文章