如何优化批量修改DOM的操作

冷不防 2022-06-05 06:12 383阅读 0赞

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

**1、使元素脱离文档流；**

**2、对其应用多重DOM改变；**

**3、把元素带回到元文档中。**

该过程会触发两次重排（reflow），如果忽略这两个操作，则第二部操作会造成多次重排。

如何使元素**脱离文档流**：

1、隐藏元素，DOM修改，重新显示；

这里主要通过**display**属性达到

2、使用文档片段（document fragment）在当前DOM之外构建一个子树，再把它拷贝到原文档中；

当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用**createDocumentFragment()** 方法，可以防止文档结构被破坏

3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素

这里主要通过**cloneNode()**方法来实现

具体的例子如下：

<ul id="mylist"> <li><a href="1">first</a></li> <li><a href="2">second</a></li> </ul>

附加的数据定义如下：

var data=[ { 'name':"third", 'url':"3" }, { 'name':'forth', 'url':'4' } ];

下面指定一个更新节点数据的通用方法：

function appendDataToElement(appendToElement,data){ var a,li; for (var i = 0,max=data.length; i < max; i++) { a=document.createElement('a'); a.href=data[i].url; a.appendChild(document.createTextNode(data[i].name)); li=document.createElement('li'); li.appendChild(a); appendToElement.appendChild(li) } }

**方法1：借助display属性**

var ul=document.getElementById('mylist'); ul.style.display='none' appendDataToElement(ul,data); ul.style.display='block';

**方法2：借助文档片段（document fragment）（推荐使用，产生的DOM遍历和重排次数最少）**

var fragment=document.createDocumentFragment(); appendDataToElement(fragment,data); document.getElementById('mylist').appendChild(fragment);

**方法3：借助cloneNode方法**

var old=document.getElementById('mylist'); var clone=old.cloneNode(true); appendDataToElement(clone,data); old.parentNode.replaceChild(clone,old)