【开发必看】你真的了解回流和重绘吗？(3)

发布时间：2019-01-22 02:43 所属栏目：21 来源：腾讯云加社区

导读：将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。 constul=document.getElementById('list'); constclone=ul.cloneNode(true); appendDataToElement(clone,data); ul.parentNode.replaceChil

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

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体验下。这个对比的性能差距就比较明显。

对于复杂动画效果,使用绝对定位让其脱离文档流

对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。这个我们就直接上个例子。

打开这个例子后，我们可以打开控制台，控制台上会输出当前的帧数(虽然不准)。