JavaScript性能优化--创建文档碎片
Hi,大家好,我是CssRain的站长。爱好前端开发的我先后从事过Java开发,JavaScript,CSS开发等,已经工作两年+了。目前就职于亚信中国(Asiainfo),担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步,同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。
在浏览器中,我们一旦把节点添加到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代码有点类似。
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:cssrain@gmail.com(admin) 来源: 前端技术
- 标签: 碎片
- 发布时间:2009-12-01 23:16:34
- [12] Python连接 MySQL 数据库的超时问
- [11] 产品设计之QQ邮箱登录页与淘宝登录页
- [11] 手机客户端交互适配设计之我见
- [10] 谈谈Facebook的聊天系统架构
- [10] 一个 VLA (可变长度数组)的实现
- [9] 没有比解决瓶颈更高效的事情了
- [9] PDC 2010:C#与Visual Bas
- [9] 四年前的今天,我开始找工作
- [9] 一句话crontab实现防ssh暴力破解
- [8] Linux 安装pptp vpn clien