JavaScript Tips 使用DocumentFragment加快DOM渲染速度


Posted in Javascript onJune 28, 2010

大家在使用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作为一个备选的方案。

Javascript 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript运算符小结
Jun 03 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
js getElementsByTagName的简写方式
Jun 27 #Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 #Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 #Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 #Javascript
jQuery选择头像并实时显示的代码
Jun 27 #Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 #Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Python 文件数据读写的具体实现
2020/01/24 Python
通过Python实现一个简单的html页面
2020/05/16 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
Java基础知识面试题
2014/03/25 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
大学生党课思想汇报
2013/12/29 职场文书
培训自我鉴定
2014/01/31 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
语文教育专业求职信
2014/06/28 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
社区节水倡议书
2015/04/29 职场文书
法制教育观后感
2015/06/17 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技