JavaScript Tips 使用DocumentFragment加快DOM渲染速度
更新时间：2010年06月28日 01:42:59 作者：
大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。
大家在使用JavaScript的时候，DOM操作是最平常不过的了， 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素，比如通过ajax请求获取到数据，然后更新页面上的元素，一般情况下，这种操作我们会用类似node.appendChild()这中方式来完成。这个方法是无缓冲的，也就是说我们每次调用appendChild方法的时候，浏览器都会重新渲染页面。当然，使用这种方法也没有什么不行，因为我们在一般情况下都是对少量的DOM节点进行更新，也并不会带来太大的性能问题，但是如果大量的更新DOM节点，那么性能的差距就会越来越明显了。因为浏览器要不停的渲染页面，尤其是一些复杂的标签，大量的重新渲染非常消耗性能，影响用户体验。那么有什么好的方法能让这类DOM操作的效率提高呢？
虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，JS中提供了一个DocumentFragment的机制，相信大家对这个并不陌生，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器很多的负担，明显的提高页面渲染速度。例如下面的代码：
function CreateNodes(){
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + " <br />";
document.body.appendChild(tmpNode);
}
}
function CreateFragments(){
var fragment = document.createDocumentFragment();
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + "<br />";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}
上面的代码给出了两个函数，分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点，大家可以自己实验一下，使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加，如果是更加复杂的HTML标签或是多层的嵌套标签，那么性能的差距就会更加明显。
通过上面的例子，大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。
虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，JS中提供了一个DocumentFragment的机制，相信大家对这个并不陌生，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器很多的负担，明显的提高页面渲染速度。例如下面的代码：
复制代码 代码如下:
function CreateNodes(){
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + " <br />";
document.body.appendChild(tmpNode);
}
}
function CreateFragments(){
var fragment = document.createDocumentFragment();
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + "<br />";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}
上面的代码给出了两个函数，分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点，大家可以自己实验一下，使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加，如果是更加复杂的HTML标签或是多层的嵌套标签，那么性能的差距就会更加明显。
通过上面的例子，大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。
相关文章
replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。2015-04-04
这篇文章主要介绍了JavaScript indexOf()原理及使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要为大家详细介绍了JS实现鼠标按下拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了JavaScript判断前缀、后缀是否是空格的方法,涉及javascript操作字符串的正则替换、判断与属性操作技巧,需要的朋友可以参考下2015-04-04
JavaScript flash复制库类 Zero Clipboard
开发中经常会用到复制的功能，在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。2011-01-01
技术文章写得少，所以有时候想写点什么却下不了手，不知道该写什么；往往到了准备要写的时候才发现自己想写的东西其实很无聊，甚至觉得很幼稚，于是又关掉了编缉器2012-08-08
这篇文章主要介绍了js实现select下拉框菜单的详细代码，感兴趣的小伙伴们可以参考一下2015-12-12
收集的一些Array及String原型对象的扩展实现代码，学习js的朋友可以参考下。并可以自定义的对字符串与array数据，进行扩展。2010-12-12
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
这篇文章主要介绍了微信小程序出现wx.navigateTo页面不跳转问题的解决方法,简单分析了微信小程序出现wx.navigateTo页面不跳转情况的原因及相应的解决方法,需要的朋友可以参考下2017-12-12
随着Web技术的发展,网页上的交互性变得越来越重要,一个在线画板是一个很好的例子,本文将使用HTML5的Canvas元素和JavaScript来实现一个简单的在线画板,需要的可以了解下2024-01-01
最新评论