前端性能之回流与重绘(reflow && repaint)

写在金三银四之际。
因为种种原因想要谋求新的发展,不得已翻起了尘封已久的高程书;写起了各种经典CSS布局;回顾起记忆略显模糊的几个项目。感慨着太多太多的知识点自己都不够深入甚至缺乏认识,却又不能急功近利,囫囵吞枣。
牢骚发完了,苦水吐完了,进入正题。

万恶之源——无知

回流(reflow),重绘(repaint)都是浏览器更新页面视图的方式,区别在于:

  • 对于元素视觉上的改变(如改变outline,background-color,visibility等)会触发repaint;
  • 对于元素布局上的改变(增删节点,触发resize事件,修改style属性等)会触发reflow;

repaint和reflow是DOM操作影响性能的主要原因。一个节点触发了repaint,浏览器会检查DOM Tree中其他所有节点的显示方式;一个节点触发了reflow会导致它的祖先节点,后代节点以及在它之后的节点全部reflow。reflow对性能的影响大于repaint。

一个前端开发人员对这些概念一无所知是一件很恐怖的事情,想想他在写代码的时候不知道哪些操作会对性能造成影响,可能会出现这种情况:

var toChange = document.getElementById('target');
toChange.style.background = '#333';
toChange.style.color = '#fff';
toChange.style.border = '1px solid #00f';

这无疑是可以优化的,下面我们来看看如何减少reflow,repaint的次数。

解决方式——控制

我们无力去改变repaint,reflow对性能损害的程度,我们能做的只有减少它们发生的次数。

脱离

动画时时刻刻都在操作着DOM,为了避免动画使得其他节点也在时时刻刻reflow,可以将动画所在的元素设为position: fixed或者position: absolute,使其脱离文档流,这个元素reflow时不会影响其他节点的布局,虽然还是会产生repaint,但相对来说得到了优化。

合并

能一次完成的操作就不要分两次。比如说添加多个节点时使用DocumentFragment:

var docFragm = document.createDocumentFragment();
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
    elem = document.createElement('p');
    contents = document.createTextNode(textlist[i]);
    elem.appendChild(contents);
    docFragm.appendChild(elem);
}
document.body.appendChild(docFragm);

再比如像上面style那个例子,如果已知变化后样式,将这些样式写成一个class,再去改变元素的class或者直接修改cssText属性,这两种方式都将多次reflow缩减为一次。

复制

对复制品进行操作也是一种解决方案,比如需要对已有节点进行DOM操作使用cloneNode():

var original = document.getElementById('container');
var cloned = original.cloneNode(true);
cloned.setAttribute('width', '50%');
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
    elem = document.createElement('p');
    contents = document.createTextNode(textlist[i]);
    elem.appendChild(contents);
    cloned.appendChild(elem);
}
original.parentNode.replaceChild(cloned, original);

使用cloneNode()要注意的是,唯一的参数代表是否进行深复制。另外cloneNode()无法复制事件监听函数,以及表单控件的value。
又比如获取offsetWidth,getComputedStyle()这些取值操作每次都会触发reflow,在第一次调用时存起来也是复制的一种。

舍弃

在做好了其他优化措施的前提下想要进一步提升性能有时需要舍弃,比如减小动画帧数,即增大动画函数执行的间隔,这样动画流畅程度会降低,但整个应用的性能得到了提升。

其他
  • 减少table的使用,table造成的reflow是其他块级元素的三倍;
  • 尽量避免改变DOM Tree中高层节点的class,减小reflow的影响;
  • 利用各种选择器规则减少待操作节点的数量;

最后,我认为理解reflow和repaint的原理及触发情况是十分重要的,在写每一行代码时都应该明确它对性能的影响。

参考文章:
REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

Effecitve JavaScript

你可能感兴趣的:(前端性能,javascript,dom)