document.createDocumentFragment()

红太狼 2020-05-26 15:10 611阅读 0赞

# document.createDocumentFragment()

此方法可能在很多时候使用频率并不是很高，尤其是在比较简单的代码中。

因为没有此方法的存在同样会正常达成效果，因为它基本是为了提高性能而存在。

createDocumentFragment字面意思是"创建文档碎片"，更准确的说是创建文档碎片容器。

实质上它创建了一个虚拟的容器，能够暂时的容纳一些DOM元素，至于如何提高性能，后面介绍。

语法结构：

```javascript
document.createDocumentFragment()
```

**浏览器支持：**

（1）.IE浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script>
window.onload=function(){
  let arr = ["一","二","三","四","五"];
  let oul = document.getElementById("box");
  for(let index = 0;index < 5;index++){
    let li = document.createElement("li");
    let txt = document.createTextNode("蒲公英云" + arr[index]);
    li.appendChild(txt);
    oul.appendChild(li);
  }
}
</script>
</head>
<body>
<ul id="box"></ul>
</body>
</html>
```

代码分析如下：

（1）.上述代码会动态生成五个li元素，并逐一将其追加到ul中。

（2）.但是上述代码的性能并不是很好，如果类似操作非常庞大的话会严重影响性能。

（3）.for循环语句每执行一次，都会创建一个li元素，然后再此li元素中添加文本，最后追加到ul中。

（4）.上述代码有一个特点，就是每一次对ul追加li元素，浏览器都会绘制渲染一次。

（5）.也就是说上述代码绘制渲染了五次，绘制和渲染操作极其消耗性能，所以上述代码性能一般。

但是由于小的操作对性能的影响并不是很明显，所以感觉此方法也就无足轻重，实际应用也较为少见。

如果上述类似DOM操作较为多的话，本文主角的作用将会得到体现，上述代码修改如下：

```javascript
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<script>
let arr=["一","二","三","四","五"];
window.onload=function(){
  let oFragment=document.createDocumentFragment();
  let oul=document.getElementById("box");
  for(let index=0;index<5;index++){
    let li=document.createElement("li");
    let txt=document.createTextNode("蒲公英云"+arr[index]);
    li.appendChild(txt);
    oFragment.appendChild(li);
  }
  oul.appendChild(oFragment);
}
</script> 
</head> 
<body> 
  <ul id="box"></ul>
</body> 
</html>
```

上述代码实现和前一段代码相同的效果，但是性能上更好一些，分析如下：

（1）.首先创建的文档碎片容器以备后面使用。

（2）.然后通过for循环不断的创建li元素，但是这里需要注意的是，并没有将li元素直接追加到ul中，而是暂时存储到文档碎片容器中，减少了浏览器绘制和渲染的次数，这是关键性的区别。

（3）.当循环完毕时，也就是生成了所有的li元素，它们都暂时存储在文档碎片容器中。

（4）.最后直接将文档碎片追加到ul中，一次性将所有的li元素追加到ul中，优点是浏览器绘制渲染一次即可。

比第一个代码实例少了四次绘制与渲染工作，性能会得到较大的提高，这也是此方法的主要作用，为了提供性能。