JavaScript性能优化--创建文档碎片
作者:66 来源:CssRain 发布时间:2009-12-04 12:41:00
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。
在浏览器中,我们一旦把节点添加到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代码有点类似。
猜你喜欢
- 今天一个同事报告一个问题,表都不能使用了,检查了一下,发现问题 db2 => select * from testACTNO ACTK
- pinyinEngine ™v0.1JavaScript拼音搜索引擎应用场景:可对本地缓存数据进行拼音匹配,如SNS网站好友快速查找、地区匹
- 首先请把手放胸前成沉思状:我上了生活,还是被生活上了自己?没想出答案把,恩,可以读下文了。从语义角度讲,同一事物的不同表述可以反映人的主观视
- CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT &
- this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。和其他
- 如何用我的国际域名做虚拟域名?config.asp<%Domain_URL = "intels.net&
- 想做个和IBM公司一样的网站LOGO,试了半天也没有做出来,郁闷之下,只好求高手帮助!先在这里谢谢了!方法一1、写上IBM,调节字号颜色2、
- Erase语句:重新初始化固定数组的元素,并释放动态数组的存储空间。用法: Era
- 在网页中经常见到两类不同的按钮。一类表示当前所示的状态,一类表示将要进行的动作。(如下图) 那么,同样是icon类的按钮,为什么有
- 或许现在关心交互设计的设计师们大部分来自于了互联网行业,所以我们看到当你搜索“交互设计”时更多的BLOG和文章是在谈论互联网,网站的导航,注
- DatePart 的语法是 DatePart(interval, date),用以取 date 的某部分。 interval yyyy:da
- 应该是开心网(kaixin.com)的宠物功能又升级了,这几次发来的邮件内容不仅不能让我开心,反而让我觉得很恶心。开心网注册也一段时间了,之
- <%dim ylj,ywj,Mlpath,Shell,rarcomm,RetCode,cmd,comm,fsoM
- 以前有过一篇类似的文章, 讲的比较简单只有三个插件而已, 所以这篇文章将全持续更新.jQuery UI 大名顶顶, 不用介绍, 它的各个控件
- 下面是代码,如果看不懂,建议先把表格的一些<tr><td>的表格原理弄清楚了,就可以了代码如下:<table&
- 需求:用SQL语句随机从数据库中随机取N条数据。以前不太清楚SQL语句可以直接随机取数据今天查了一下,发现有两个随机函数: newid()
- 大家都知道JAVA里最流行的是MVC模型的编程方式,如果你不知道MVC的概念,可以去网上搜索下,应该会马上找到N多资料。PHP5推出之后,也
- 本文详细列出了HTML中使用到的各种鼠标事件,如onclick,onmouseover等;页面相关事件如:onerror,onload等;h
- 一、什么是sql子查询? 子查询是一个嵌套在Select 、Insert 、Update 或Dele
- 最近在工作当中遇到一个问题 有个页面需要添加一个浏览历史记录功能具体来说就是要记录下用户在此网站的点击历史 并把它们降序排列出来(只显示前6