揭露DOM操作以及性能优化

阳光穿透心脏的1/2处 2022-06-14 04:20 314阅读 0赞

我们都知道：JavaScript DOM操作的效率是很低的，而且不是一般的慢，而且这也是引发性能问题的常见问题之一。为什么会慢呢？因为对DOM的修改为影响网页的用户界面，重绘页面是最昂贵的浏览器操作之一。  
在讨论页面重绘、重排之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。  
![这里写图片描述][SouthEast]  
1. 浏览器把获取到的HTML代码解析成一个DOM树，HTML中的每个tag都是DOM树中的节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。  
2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉\_开头的样式。  
3、DOM Tree 和样式结构体组合后构建render tree,render tree能识别样式，render tree中每个节点都有自己的样式，而且 render tree不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。  
4. 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。

#### **回流与重绘** ####

1.  当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2.  当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。  
    *注意*：回流必将引起重绘，而重绘不一定会引起回流。  
    **回流何时发生：**  
    当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：  
    1、添加或者删除可见的DOM元素；  
    2、元素位置改变；  
    3、元素尺寸改变——边距、填充、边框、宽度和高度  
    4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；  
    5、页面渲染初始化；  
    6、浏览器窗口尺寸改变——resize事件发生时；  
    DOM操作带来的页面重绘或重排是不可避免的，但可以遵循一些最佳实践来降低由于重排或重绘带来的影响。如下是一些具体的实践方法：  
    **一、 合并多次的DOM操作为单次的DOM操作**  
    最常见频繁进行DOM操作的是频繁修改DOM元素的样式，代码类似如下：

element.style.color = "red";
    element.style.fontSize = "20px";
    element.style.background = "blue";

这种编码方式会因为频繁更改DOM元素的样式，触发页面多次的重排或重绘,建议可以把这些样式放到一个class里面，减少对DOM的操作:

.exstyle{
        color: red;
        font-size: 20px;
        background: blue;
    }
    //在js中换成这种写法
    element.className = "exstyle";

类似的操作还有通过innerHTML接口修改DOM元素的内容。不要直接通过此接口来拼接HTML代码，而是以字符串方式拼接好代码后，一次性赋值给DOM元素的innerHTML接口。  
**二、把DOM元素离线或隐藏后修改**  
把DOM元素从页面流中脱离或隐藏，这样处理后，只会在DOM元素脱离和添加时，或者是隐藏和显示时才会造成页面的重绘或重排，对脱离了页面布局流的DOM元素操作就不会导致页面的性能问题。这种方式适合那些需要大批量修改DOM元素的情况。  
（1）使用文档碎片（documentfragment）作为那些已创建元素元素的临时容器，最后一次将容器的内容直接添加到父节点中：

var fragment = document.createDocumentFragment(); 
    for(var i=0; i<items.length; i++){  
        var item = document.createElement("li");  
        item.appendChild( document.createTextNode("Option"+i);  
        fragment.appendChild(item);  
    }  
    list.appendChild(fragment);

再看下面一段代码：

for( var i=0; i<items.length; i++){  
        varitem = document.createElement("li");  
        item.appendChild(document.createTextNode("Option"+i);  
        list.appendChild(item);  
    }

这段代码的效率是很低的，因为他在每次循环中都会修改当前DOM结构。相比之下，第一段代码只会修改一次当前DOM的结构，就在最后一行，而在这之前，我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容，所以这类修改不会触发回流操作。实际上，文档碎片也不能被添加到DOM中，我们需要将它作为参数传给appendChild函数，而实际上添加的不是文档碎片本身，而是它下面的所有子元素。  
（2）通过设置DOM元素的display样式为none来隐藏元素  
由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。

var myElement = document.getElementById('myElement');
    myElement.style.display = 'none';
        // 一些基于myElement的大量DOM操作
    ...
    myElement.style.display = 'block';

（3）克隆DOM元素到内存中  
这种方式是把页面上的DOM元素克隆一份到内存中，然后再在内存中操作克隆的元素，操作完成后使用此克隆元素替换页面中原来的DOM元素。这样一来，影响性能的操作就只是最后替换元素的这一步操作了，在内存中操作克隆元素不会引起页面上的性能损耗。

var old = document.getElementById('myElement');
    var clone = old.cloneNode(true);
        // 一些基于clone的大量DOM操作
    ...
    old.parentNode.replaceChild(clone, old);

**三、设置具有动画效果的DOM元素的position属性为fixed或absolute**  
把页面中具有动画效果的元素设置为绝对定位，使得元素脱离页面布局流，从而避免了页面频繁的重排，只涉及动画元素自身的重排了。这种做法可以提高动 画效果的展示性能。如果把动画元素设置为绝对定位并不符合设计的要求，则可以在动画开始时将其设置为绝对定位，等动画结束后恢复原始的定位设置。在很多的 网站中，页面的顶部会有大幅的广告展示，一般会动画展开和折叠显示。如果不做性能的优化，这个效果的性能损耗是很明显的。使用这里提到的优化方案，则可以 提高性能。  
**四、谨慎取得DOM元素的布局信息**  
1.缓存DOM对象:因为获取DOM的布局信息会有性能的损耗，所以如果存在重复调用，最佳的做法是尽量把这些值缓存在局部变量中。

for (var i=0; i < len; i++) { myElements[i].style.top = targetElement.offsetTop + i*5 + 'px'; }

如上的代码中，会在一个循环中反复取得一个元素的offsetTop值，事实上，在此代码中该元素的offsetTop值并不会变更，所以会存在不必要的性能损耗。优化的方案是在循环外部取得元素的offsetTop值，相比较之前的方案，此方案只是调用了一遍元素的offsetTop值。

var targetTop = targetElement.offsetTop;
    for (var i=0; i < len; i++) { myElements[i].style.top = targetTop+ i*5 + 'px'; }

2.因为取得DOM元素的布局信息会强制浏览器刷新渲染树，并且可能会导致页面的重绘或重排，所以在有大批量DOM操作时，应避免获取DOM元素 的布局信息，使得浏览器针对大批量DOM操作的优化不被破坏。如果需要这些布局信息，最好是在DOM操作之前就取得。

var newWidth = div1.offsetWidth + 10;
    div1.style.width = newWidth + 'px';
    
    var newHeight = myElement.offsetHeight + 10; // 强制页面重排
    myElement.style.height = newHeight + 'px'; // 又会重排一次

如果把取得DOM元素的布局信息提前，因为浏览器会优化连续的DOM操作，所以实际上只会有一次的页面重排出现.

var newWidth = div1.offsetWidth + 10;
    var newHeight = myElement.offsetHeight + 10;
    
    div1.style.width = newWidth + 'px';
    myElement.style.height = newHeight + 'px';

**五、 使用事件托管方式绑定事件**  
在DOM元素上绑定事件会影响页面的性能，一方面，绑定事件本身会占用处理时间，另一方面，浏览器保存事件绑定，所以绑定事件也会占用内存。页面中 元素绑定的事件越多，占用的处理时间和内存就越大，性能也就相对越差，所以在页面中绑定的事件越少越好。一个优雅的手段是使用事件托管方式，即利用事件冒 泡机制，只在父元素上绑定事件处理，用于处理所有子元素的事件，在事件处理函数中根据传入的参数判断事件源元素，针对不同的源元素做不同的处理。这样就不 需要给每个子元素都绑定事件了，管理的事件绑定数量变少了，自然性能也就提高了。这种方式也有很大的灵活性，可以很方便地添加或删除子元素，不需要考虑因 元素移除或改动而需要修改事件绑定。

// 获取父节点，并添加一个click事件
    document.getElementById('list').addEventListener("click",function(e) { // 检查事件源元素 if(e.target && e.target.nodeName.toUpperCase == "LI") { // 针对子元素的处理 ...
        }
    });

只在父元素上绑定了click事件，当点击子节点时，click事件会冒泡，父节点捕获事件后通过e.target检查事件源元素并做相应地处理。

[SouthEast]: /images/20220614/b9f3756d2e8948959a6bba21c1e3c46a.png