前端CSS-优化回流，重绘

之前的一篇文章通过浏览器的渲染机制讲了回流、重绘以触发条件；同时整理了浏览器的优化机制，那么作为一个前端猿，怎么去优化他们呢？

今天主要从优化的两个方面：1.减少回流，重绘次数；2.避免回流，重绘。

减少回流，重绘的次数

从之前的一篇文章，我们可以知道，只要我们修改元素的几何信息的时候，就会发生回流和重绘。那么，减少回流，重绘的次数的方案，大概分为以下几种：

CSS合并

看一下这个例子

const div= document.getElementById('div');
div.style.padding = '5px';
div.style.margin= '10px';

例子中，修改了元素的pading和margin，每一个都会影响元素的几何结构，引起回流。当然，之前有提到，现代浏览器是非常智能的，它们会自动对这些操作进行优化，只会触发一次回流。但是如果考虑一些旧版的浏览器或者在上面代码执行的时候，上述代码就可能会发生三次回流。

因此，我们可以合并所有的改变然后依次处理，比如我们可以采取以下的方式：

• cssText

const div= document.getElementById('test');
div.style.cssText += 'margin: 10px; padding: 5px;';

• 修改元素class

const div= document.getElementById('test');
div.className += ' class';

批量修改DOM

当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：

1. 使元素脱离文档流
2. 对其进行批量修改
3. 将元素添加文档中。

该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流重绘，因为它已经不在渲染树了。

有三种方式可以让DOM脱离文档流：

• 隐藏元素，应用修改，重新显示
• 使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档。
• 将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。

隐藏元素，应用修改，重新显示

看下这个列子

function appendElement(parent, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
    	li = document.createElement('li');
        li.textContent = 'text';
        parent.appendChild(li);
    }
}

const ul = document.getElementById('list');
appendElement(ul, data);

如果我们直接执行段代码的话，每一次循环都会触发一次回流。我们可以先将元素隐藏起来，修改完成后，再显示。

function appendElement(parent, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
    	li = document.createElement('li');
        li.textContent = 'text';
        parent.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
parent(ul, data);
ul.style.display = 'block';

这样虽然元素隐藏显示的时候会触发两次 ，但是比较之前每一次循环都触发一次，就已经好了很多。

使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档

这里先借用菜鸟教程的fragment的介绍：

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendElement(fragment, data);
ul.appendChild(fragment);

将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素

const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendElement(clone, data);
ul.parentNode.replaceChild(clone, ul);。

其实上述优化方案，在现在已经基本上可以不考虑了；那么就有人问了：

因为现代浏览器会使用队列来储存多次修改，进行优化，所以上述优化方案，我们其实不用优先考虑。

避免触发同步布局

之前讲过，当我们访问元素的一些属性的时候，会导致浏览器强制清空队列，进行强制同步布局。举个例子，比如说我们想将一个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';
    }
}

避免回流，重绘

比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！

敲黑板：

1. 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。

2. 对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

常见的触发硬件加速的css属性：

• transform
• opacity
• filters
• Will-change

总结

本文主要讲了及如何减少甚至避免回流和重绘，希望可以帮助到大家。