您的位置:首页> 前端教程> JS教程
文章导航

document.createDocumentFragment()

2019-4-21 23:27| 作者: admin| 查看: 548| 评论: 0|来自: 蚂蚁部落

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

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

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

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

语法结构:

[JavaScript] 纯文本查看 复制代码
document.createDocumentFragment()

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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操作较为多的话,本文主角的作用将会得到体现,上述代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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中,优点是浏览器绘制渲染一次即可。

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部