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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
详解javascript高级定时器
Dec 31 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
js与applet相互调用的方法
Jun 22 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
js实现移动端图片滑块验证功能
Sep 29 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制作静态网站的模板框架(三)
2006/10/09 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
python 字典的打印实现
2019/09/26 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python高级特性简介
2020/08/13 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
初中同学聚会感言
2014/02/11 职场文书
美国留学经济担保书
2014/05/20 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
基石观后感
2015/06/12 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
微信小程序调用python模型
2022/04/21 Python