第 22 题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化 #24
Comments
|
reflow 翻译为 重排更加合理吧。 |
|
这就不得不介绍(推销)下我的文章了:你真的了解回流和重绘吗 你真的了解回流和重绘吗回流和重绘可以说是每一个web开发者都经常听到的两个词语，可是可能有很多人不是很清楚这两步具体做了什么事情。最近有空对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。 浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，优化性能，可以跳到后面。（这个渲染过程来自MDN） 从上面这个图上，我们可以看到，浏览器渲染过程如下：
渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。 生成渲染树为了构建渲染树，浏览器主要完成了以下工作：
第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括：
从上面的例子来讲，我们可以看到span标签的样式有一个display:none，因此，它最终并没有在渲染树上。 注意：渲染树只包含可见的节点 回流前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。 为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，我们可以以下面这个实例来表示： <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值。（如下图） 重绘最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。 既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。 何时发生回流重绘我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：
注意：回流一定会触发重绘，而重绘不一定会回流 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。 浏览器的优化机制现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，**最好避免使用上面列出的属性，他们都会刷新渲染队列。**如果要使用它们，最好将值缓存起来。 减少回流和重绘好了，到了我们今天的重头戏，前面说了这么多背景和理论知识，接下来让我们谈谈如何减少回流和重绘。 最小化重绘和重排由于重绘和重排可能代价比较昂贵，因此最好就是可以减少它的发生次数。为了减少发生次数，我们可以合并多次对DOM和样式的修改，然后一次处理掉。考虑这个例子 const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';例子中，有三个样式属性被修改了，每一个都会影响元素的几何结构，引起回流。当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。 因此，我们可以合并所有的改变然后依次处理，比如我们可以采取以下的方式：
批量修改DOM当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：
该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流重绘，因为它已经不在渲染树了。 有三种方式可以让DOM脱离文档流：
考虑我们要执行一段批量插入节点的代码： function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
const ul = document.getElementById('list');
appendDataToElement(ul, data);如果我们直接这样执行的话，由于每次循环都会插入一个新的节点，会导致浏览器回流一次。 我们可以使用这三种方式进行优化: 隐藏元素，应用修改，重新显示 这个会在展示和隐藏节点的时候，产生两次回流 function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档 const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。 const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);对于上面这三种情况，我写了一个demo在safari和chrome上测试修改前和修改后的性能。然而实验结果不是很理想。 原因：原因其实上面也说过了，现代浏览器会使用队列来储存多次修改，进行优化，所以对这个优化方案，我们其实不用优先考虑。 避免触发同步布局事件上文我们说过，当我们访问元素的一些属性的时候，会导致浏览器强制清空队列，进行强制同步布局。举个例子，比如说我们想将一个p标签数组的宽度赋值为一个元素的宽度，我们可能写出这样的代码： function initP() {
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}这段代码看上去是没有什么问题，可是其实会造成很大的性能问题。在每次循环的时候，都读取了box的一个offsetWidth属性值，然后利用它来更新p标签的width属性。这就导致了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每一次循环都会强制浏览器刷新队列。我们可以优化为: const width = box.offsetWidth;
function initP() {
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = width + 'px';
}
}同样，我也写了个demo来比较两者的性能差异。你可以自己点开这个demo体验下。这个对比的性能差距就比较明显。 对于复杂动画效果,使用绝对定位让其脱离文档流对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。这个我们就直接上个例子。 打开这个例子后，我们可以打开控制台，控制台上会输出当前的帧数(虽然不准)。 从上图中，我们可以看到，帧数一直都没到60。这个时候，只要我们点击一下那个按钮，把这个元素设置为绝对定位，帧数就可以稳定60。 css3硬件加速（GPU加速）比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！ 划重点： 1. 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。 2. 对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。 本篇文章只讨论如何使用，暂不考虑其原理，之后有空会另外开篇文章说明。 如何使用常见的触发硬件加速的css属性：
效果我们可以先看个例子。我通过使用chrome的Performance捕获了动画一段时间里的回流重绘情况，实际结果如下图： 从图中我们可以看出，在动画进行的时候，没有发生任何的回流重绘。如果感兴趣你也可以自己做下实验。 重点
css3硬件加速的坑当然，任何美好的东西都是会有对应的代价的，过犹不及。css3硬件加速还是有坑的:
总结本文主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘，希望可以帮助大家更好的理解回流重绘。 参考文献
|
|
不好意思，想问一下设置成图层意思就是脱离文档流吗 |
yygmind
changed the title
|
@chenjigeng 写得真心好。”立即回流是同步的“与那个demo解决了我一直以来的疑惑。谢谢二位大佬慷慨奉献。 |
|
补充个，用css contain属性隔离指定节点的样式、布局和渲染 |
|
感谢大佬的指点，谢谢~！ |
|
提一个问题关于css3硬件加速的坑，如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。请问如何关闭硬件加速？ |
批量修改DOM中，如果你在循环中加入强制刷新队列的操作，比如console.log(div.offsetWidth),优化的效果还是挺明显的。。 |
是啊，所以要避免这个操作。 |
background-color的改变也会回流？ |
同问+1 background-color应该只会重绘吧 |
|
我本来也以为只会重绘。。不过在chrome里，使用performance记录了下，发现还是会触发回流，这个我也觉得很奇怪。你们也可以去尝试复现下。也有可能是我模拟的有问题 |
|
我写了一个很简单的demo： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
setTimeout(() => {
document.querySelector('div').style.backgroundColor = 'red'
}, 2000)
</script>
</body>
</html>
然后用performance记录了一下，在修改背景色的时候，只触发了 |
|
@HenryYong |
我尝试了修改
|
|
@HenryYong 恩恩，那看来修改background是不会触发回流（Layout）的。他这里的Recaculate Style和Update Render Tree让人误解了。 |
重排叫了快10年了, 突然来个回流, 有点蒙, 哈哈 |
|
|
|
用上面 @HenryYong 大兄弟的demo，单纯改变颜色只有re-paint 但是我将 document.querySelector('div').style.backgroundColor = 'red'改为 document.querySelector('div').style.height = '500px'再看结果，会多一个Layout的步骤，引起了回流【重排】
|
|
我做过些测试，当连续读或者连续写会引入重排的style属性时，浏览器会把连续的读，或连续的写放入队列，到下一帧渲染时才一次执行。如果是连续的写属性接着又读属性，那就会频繁的清空队列，频繁的重排。 |
|
哪些属性会引起 reflow，哪些会引起 reprint，可以看这里：https://csstriggers.com/。 不同浏览器的效果不一定相同，不能一概而论。 |
|
@chenjigeng 我想问下，执行一段批量插入节点的代码 ，那一段为什么不用一个数组 arr 装着所有的新建的 li, 然后用 append(...arr) 一次性添加呢？ |
这个就不好了吧。visibility只是隐藏，还在页面上占空间呢。功能不一样。 |
|
@jakesamz hhhh,都可以~你也可以用这种方式，没有什么特别的原因 |
|
Cool! |
|
所以为啥transform不会引起回流和重绘呢，是因为GPU加速所以可以不用回流和重绘吗。还是不太明白 |
喧宾夺主（🐕） |
|
1、DOM 和CSSOM结合生成render tree的过程就是重排（reflow）和重绘（repaint） |
|
按照回流的描述, 当页面布局和几何信息发生变化的时候，就需要回流。根据改变的范围和程度渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排. 没错吧? |
确实，最搞笑的是现在的文章起名叫做《回流和重绘》，然后文章里讲着讲着又出现重排，看得人晕死。 |
|
已收到！
|
and others
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中紧随其后的节点、祖先节点元素的随后的回流。
在上面的HTML片段中，对该段落(
<p>标签)回流将会引发强烈的回流，因为它是一个子节点。这也导致了祖先的回流（div.error和body– 视浏览器而定）。此外，<h5>和<ol>也会有简单的回流，因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。回流必定会发生重绘，重绘不一定会引发回流。
4. 浏览器优化
现代浏览器大多都是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。
主要包括以下属性或方法：
offsetTop、offsetLeft、offsetWidth、offsetHeightscrollTop、scrollLeft、scrollWidth、scrollHeightclientTop、clientLeft、clientWidth、clientHeightwidth、heightgetComputedStyle()getBoundingClientRect()所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。
5. 减少重绘与回流
CSS
使用
transform替代top使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局避免使用
table布局，可能很小的一个小改动会造成整个table的重新布局。尽可能在
DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的
span标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的span标签，然后找到span标签上的a标签，最后再去找到div标签，然后给符合这种条件的span标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。将动画效果应用到
position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择requestAnimationFrame，详见探讨 requestAnimationFrame。避免使用
CSS表达式，可能会引发回流。将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如
will-change、video、iframe等标签，浏览器会自动将该节点变为图层。CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让
transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。JavaScript
style属性，或者将样式列表定义为class并一次性更改class属性。DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。详见浏览器的重绘与回流（Repaint、Reflow）
The text was updated successfully, but these errors were encountered: