JavaScript性能优化小技巧，创建文档碎片
来源：CssRain 发布时间：2010-03-31 18:27: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代码有点类似。
0
投稿猜你喜欢
- 当我们建立一个数据库时，并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时，尤其是在进行数据检验、净化和转换时，将会面临很大
- 创建用户定义函数，它是返回值的已保存的 Transact-SQL 例程。用户定义函数不能用于执行一组修改全局数据库状态的操作。与系统函数一样
- 最近项目中要用到一个正则表达式，排除某个字符串，我们知道排除单个字符串的话，可以用[^abc],这样就可以排除a或者b或者c了，但是要排除a
- 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
用FrontPage做网页的朋友们，你的主要页面中，可能都带有许多相同的元素吧？如页头横向排列(或左侧纵向排列)的主要链接按钮、页底的板权说- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经
- 客户的一台服务器出现Raid故障，经过我们的努力，数据基本恢复成功，但是其中的一个SQL Server日志文件（扩展名LDF）损坏严重，基本
- 我们在做表单的时候经常会使用到这样的结构：<fieldset> <lege
- Acunetix Web Vulnerability Scanner 是一款国外产的及其优秀的扫描工具，可以帮忙挖掘网站内的诸多漏洞，包括常
- 重要提示：本文并非一篇简单地介绍内联格式模型（inline formatting model）的文章。相反，它是对内联格式（inline f
- 1.触发器概述触发器是SQL Server数据库应用中一个重要工具，是一种特殊类型的存储过程，应用非常广泛。一般存储过程主要通过存储过程名而
- 首先恭喜月影，当然希望好书大卖！原文提供了样章下载1.1M，pdf格式的。如果大家想下载可以访问源地址：http://bbs.51js.co
- 我们平常在网页上显示的字体最小一般是12PX，当小于10PX时，显示的效果就大打折扣了，因为中文默认的字体是宋体，当小于12PX时的效果如下
- 通过《SQL Server 数据库备份和还原认识和总结（一）》，相信您对数据备份和还原有了一个更深入的认识，在上文中我没有对事务日志做剖析，
- MySQL 5.0.16的乱码问题可以用下面的方法解决：1.设置phpMyAdminLanguage:Chinese simplified
- 请问论坛的树状记录表是怎么展开的？如何做？论坛的这种展开技术一般采用两种方法实现，一种是采用递归的方法，优点是逻辑简单，编程简单，缺点是速度
- 在开始聊我在阿里四个月的网页推广设计之前，我想先来说说我对平面设计和网页设计的认识。它们之间的交集。它们都是集艺术创作、电脑技术和数字技术于
- 历时半年，我独自一人完成了一个局级单位的管理信息系统，共发布BETA版29次，正式版本3次。ASP+ORACLE环境，285个ASP文件，功
- 问：怎样解决mysql连接过多的错误？答：系统不能连接数据库，关键要看两个数据：1、数据库系统允许的最大可连接数max_connection
- JavaScript中indexOf函数方法是返回 String 对象内第一次出现子字符串的字符位置。使用方法：strObj.indexOf
