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 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
关于js datetime的那点事
Nov 15 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
canvas实现贪食蛇的实践
Feb 15 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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和MySQL保存和输出图片
2006/10/09 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
从setTimeout看js函数执行过程
2017/12/19 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python GUI编程完整示例
2019/04/04 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
毕业生的自我评价分享
2013/12/18 职场文书
年终晚会活动方案
2014/08/21 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL