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查找父元素、子元素(个人经验总结)
Apr 09 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
vue实现移动端省市区选择
Sep 27 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
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
django的csrf实现过程详解
2019/07/26 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
五年级科学教学反思
2014/02/05 职场文书
法人委托书范本
2014/04/04 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
先进学校事迹材料
2014/12/30 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
上学路上观后感
2015/06/16 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle