JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
更新时间：2010年07月13日 20:20:02 作者：
讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。
在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。代码如下：
for(var i=0;i<5;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
但是，如果当我们要向document中添加大量数据时(比如1w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。
为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。代码如下：
var oFragmeng = document.createDocumentFragment(); //先创建文档碎片
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op); //先附加在文档碎片中
}
document.body.appendChild(oFragmeng);//最后一次性添加到document中
经过测试，在ie，firefox下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的，如果不加以注意，后果很严重。
PS：这个优化跟循环添加html代码有点类似。
复制代码 代码如下:
for(var i=0;i<5;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
但是，如果当我们要向document中添加大量数据时(比如1w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。
为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。代码如下：
复制代码 代码如下:
var oFragmeng = document.createDocumentFragment(); //先创建文档碎片
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op); //先附加在文档碎片中
}
document.body.appendChild(oFragmeng);//最后一次性添加到document中
经过测试，在ie，firefox下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的，如果不加以注意，后果很严重。
PS：这个优化跟循环添加html代码有点类似。
相关文章
这篇文章主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要帮助大家轻松掌握JavaScript享元模式，告诉大家想什么是js享元模式，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了用JS常用几个算法的实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
顾名思义,任务队列就是存放任务的队列,队列中的任务都严格按照进入队列的先后顺序执行,所以下面我们就来看看如何基于JS实现任务队列吧2023-08-08
面试题中有一题数组去重，首先想到的是对象存键值的方法可是遇到不同类型又能转换成同样的字符串的就完了接下来为大家介绍下双重循环/存键值和类型实现去重，感兴趣的各位可以参考下哈2013-03-03
这篇文章主要告诉大家JavaScript如何处理移动端拍摄图片旋转问题，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
基于 Bootstrap Datetimepicker 联动
这篇文章主要介绍了基于bootstrap datetimepicker 联动效果,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了两个函数相互调用如何防止死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了js实现指定时间倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
本篇文章主要介绍了js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最新评论