JavaScript性能优化 创建文档碎片(document.createDocumentFragment)


Posted in Javascript onJuly 13, 2010

在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下:

for(var i=0;i<5;i++){ 
var op = document.createElement("span"); 
var oText = document.createTextNode(i); 
op.appendChild(oText); 
document.body.appendChild(op); 
}

但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。
为了解决这个问题,我们可以引入createDocumentFragment()方法,它的作用是创建一个文档碎片,把要插入的新节点先附加在它上面,然后再一次性添加到document中。代码如下:
var oFragmeng = document.createDocumentFragment(); //先创建文档碎片 
for(var i=0;i<10000;i++){ 
var op = document.createElement("span"); 
var oText = document.createTextNode(i); 
op.appendChild(oText); 
oFragmeng.appendChild(op); //先附加在文档碎片中 
} 
document.body.appendChild(oFragmeng);//最后一次性添加到document中

经过测试,在ie,firefox下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。

PS:这个优化跟循环添加html代码有点类似。

Javascript 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
vue如何从接口请求数据
Jun 22 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 #Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 #Javascript
javascript中字符串拼接需注意的问题
Jul 13 #Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 #Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 #Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 #Javascript
不同浏览器的怪癖小结
Jul 11 #Javascript
You might like
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php去除HTML标签实例
2013/11/06 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
js微信分享API
2020/10/11 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
Js apply方法详解
2017/02/16 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
大学学生个人总结
2015/02/15 职场文书
总账会计岗位职责
2015/04/02 职场文书
营业员岗位职责范本
2015/04/14 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书