重绘和重排性能优化

重绘和重排

1.1 DOM树和渲染树

浏览器下载完页面中的所有组件、HTML标记,javascript,css图片、之后会解析并生成两个内部的数据结构

DOM树:

表示页面结构

渲染树:

表示DOM节点如何显示

DOM树中每一个需要显示的节点在渲染树中至少存在一个对应的节点,(隐藏的DOM元素没有对应的节点).渲染树中的节点被称为帧或盒.一旦DOM树和渲染树构建起来,浏览器就会显示(绘制"paint") 页面元素.

1.2 什么是重绘和重排

当DOM的变化改变了元素的几何属性,例如宽和高,或者改变了边框高度,给段落增加文本,等等等.都会导致浏览器需要重新计算元素的几何属性,同样其他的元素的几何属性个位置也会因此受到影响,浏览器会使渲染树受到影响的部分失效, 并重新构建渲染树, 这个过程称为 "重排". 完成重排后, 浏览器会重新绘制受影响的部分到屏幕中,该过程称为"重绘".

并不是所有的DOM变化都会影响几何属性,例如改变一个元素的背景色并不会改变他的宽和高, 在这种情况下,只会发生一次重绘,因为页面的布局并没有改变.

重绘和重排都是代价昂贵的操作,它们会导致web应用程序的UI反应迟钝, 所以尽可能得减少这类操作的发生.

1.3 重排何时发生

添加或删除可见的元素
元素的位置发生了改变
元素的尺寸发生了改变, 包括外边距, 内边距, 边框宽度, 高度等属性被改变
内容改变, 例如: 文本改变或者图片被另一个不同尺寸的图片替代
页面渲染器初始化
浏览器可视区域尺寸改变

根据改变的范围和程度, 渲染树或大或小对应的部分都需要重新计算然后渲染到页面上, 有些改变会触发整个页面的重排,

例如当滚动条出现时.

1.4 最小化重绘和重排

重绘和重排对性能的消耗十分昂贵,因此一个好的提高程序响应速度的方法减少减少此类操作的发生.

为了减少发生次数,应该合并多次对DOM和样式的修改,然后一次性处理掉.

通过DOM改变元素样式:

let el = document.getElementById("div")
el.style.width = "434px";
el.style.padding = "4px";
el.style.borderLeft = "6px";

示例中三个样式属性被改变, 每一次都影响了元素的几何结构.最糟糕的情况下,会导致浏览器触发三次重排.大部分现代浏览器为此做了优化,只会触发一次重排.但是在旧版本浏览器中仍然效率低下.

一个能够得到同样效果且效率更高的方式是: 合并所有的改变然后一次性处理,这样只会改变DOM一次.使用cssText属性可以实现.

let el = document.getElementById("div")
el.style.cssText = 'width:12px; height:46px; padding:4px'

例子上的代码修改了cssText属性并覆盖了已存在的样式信息, 因此如果向保留现有样式,可以把他附加到cssText字符串后面.

el.style.cssText += 'padding-left:5px'

另外一种一次性改变元素元素的方法是修改css的class类名 ,而不是修改内联样式改变css的Clss名称的方法更清晰,更易于维护.

let el = document.getElementById("div")
el.className = 'style';
el.classList.add("active")

1.5 批量修改DOM

当年需要对DOM元素进行一系列操作时,可以通过以下步骤来减少重绘和重排的次数:

使元素脱离文档流
对其应用进行多重改变
将文档带回文档流

该过程里会触发两次重排---> 第一步和第三步. 如果你忽略第这两个步骤, 那么在第二步所产生的任何修改都会触发一次重排

有三种基本方法可以使DOM脱离文档:

隐藏元素, 应用修改, 重新显示
使用文档碎片在DOM树之外构建一个子树,再把它拷贝会文档
将原始元素拷贝到一个脱离文档的节点, 修改副本,完成之后在替换原始元素

假设我们有一个普通的列表文本,我们要更新其中的文本内容

   <ul id="myList"> 
        <li> text1 </li>
        <li> text2 </li>
    </ul>

假设数据已经定义到一个数组对象中,要插入这些列表. 这些数据定义如下

let data = [ {text:"text3"}, {text:"text4"}]

下面是是一个用来更新指定节点数据通用函数

function updatePageData(appendEle,data){
    let li;
    for(let i = 0,max = data.length; i < max;i++){
        li = document.createElement("li");
        li.textContent = data[i].text;
        appendEle.append(li)
    }
}

我们通过会使用下面这种正常的方法调用这个函数

let myList = document.getElementById("myList");
updatePageData(myList,dataArr)

然而使用上面这种方法,data数据中的每一次数据被附加到当前DOM树,都会导致一次重排.正如上文所讲到的,一种减少

重排的方法是通过改变display属性, 临时从文档中移除ul元素, 然后在恢复他

let myList = document.getElementById("myList");
myList.style.display = 'none'
updatePageData(myList,dataArr);
myList.style.display = 'block';

另一种改变重排的次数:在文档之外创建一个文档碎片,然后把它附加到原始列表中

let fragment = document.createDocumentFragment();
updatePageData(fragment,dataArr);
myList.append(fragment);

第三种解决方案是为需要修改的节点创建一个备份. 然后对副本进行操作, 一旦操作完成,就有新的节点替代旧的节点.

let myList = document.getElementById("myList");
let clone = myList.cloneNode(true);
updatePageData(clone,dataArr);
myList.parentNode.replaceChild(clone, myList)

我们推荐使用第二个方案( 文档碎片) 因为它所产生的DOM遍历和重排次数最少.