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 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
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
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python备份文件的脚本
2008/08/11 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python 利用zmail库发送邮件
2020/09/11 Python
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
社区护士演讲稿
2014/08/27 职场文书
离婚协议书标准格式
2014/10/04 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
图书借阅制度范本
2015/08/06 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android