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

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

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属性：

•  transform
•  opacity
•  filters
•  Will-change

结果

我们可以先看个例子。我通过行使chrome的Performance捕捉了动画一段时刻里的回流重绘环境，现实功效如下图：

添加描写

从图中我们可以看出，在动画举办的时辰，没有产生任何的回流重绘。假如感乐趣你也可以本身做下尝试。

重点

•  行使css3硬件加快，可以让transform、opacity、filters这些动画不会引起回流重绘
•  对付动画的其余属性，好比background-color这些，照旧会引起回流重绘的，不外它照旧可以晋升这些动画的机能。

css3硬件加快的坑

虽然，任何柔美的对象都是会有对应的价钱的，矫枉过正。css3硬件加快照旧有坑的:

•  假如你为太多元素行使css3硬件加快，会导致内存占用较大，会有机能题目。
•  在GPU渲染字领会导致抗锯齿无效。这是由于GPU和CPU的算法差异。因此假如你不在动画竣事的时辰封锁硬件加快，会发生字体恍惚。

总结

本文首要讲了赏识器的渲染进程、赏识器的优化机制以及怎样镌汰乃至停止回流和重绘，但愿可以辅佐各人更好的领略回流重绘。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!