var arrText = ["1","2","3","4","5","6","7","8","9","10"]; 

var oFragment = document.createDocumentFragment(); 

for(var i=0;i<arrText.length;i++) { 

    var oP = document.createElement("p"); 

    var oText = document.createTextNode(arrText[i]); 

     oP.appendChild(oText); 

    oFragment.appendChild(oP); 

} 

document.appendChild(oFragment); 

在浏览器中,我们一旦把节点添加到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下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。

一旦把节点添加到document.body(或其后的节点)中,页面就会立即反映出这个变化。对于少量的更新,这是很好的。然而,当要向document.body添加大量数据时,如果逐个添加这些节点,这个过程有可能会十分缓慢。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。

假设你想创建十个新段落。你可能这样写:

var arrText = ["1","2","3","4","5","6","7","8","9","10"]; 

for(var i=0;i&lt;arrText.length;i++) { 

    var oP = document.createElement("p"); 

    var oText = document.createTextNode(arrText[i]); 

     oP.appendChild(oText); 

    document.body.appendChild(oP); 

} 

这段代码运行良好,但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时,文档碎片会更高效:

var arrText = ["1","2","3","4","5","6","7","8","9","10"];

var oFragment = document.createDocumentFragment();

for(var i=0;i&lt;arrText.length;i++) {

var oP = document.createElement("p");

var oText = document.createTextNode(arrText[i]);

oP.appendChild(oText);

oFragment.appendChild(oP);

}

document.appendChild(oFragment);

这段代码中,document.body.appendChild()仅调用了一次,这意味首只需要进行一次屏幕的刷新。

document文档碎片的更多相关文章

  1. JS性能优化之创建文档碎片(document.createDocumentFragment)

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  2. 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

          讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...

  3. 有关文档碎片(document fragment)的使用方法

    通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意 味着将DOM的改变分批处 ...

  4. javascript创建文档碎片节点

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  5. createDocumentFragment() 创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  6. javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  7. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  8. js文档碎片

    //文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...

  9. 文档碎片DocumentFragment

    文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...

随机推荐

  1. python学习之IO:

    输入输出兼程IO操作,有同步(速度不匹配时四等)和异步(轮询和消息通知,复杂而高效) 一 文件操作函数: 文件打开:f=open("文件路径“,“操作类型 r/rb/w/a”,"编 ...

  2. WebService_Demo

    简述 使用IDEA开发webservice服务,从零开始一步一步指引你. 服务端开发 首先创建一个webservice项目,如下图 创建完项目后idea会帮我们创建一个类,helloword,我们把它 ...

  3. java定时读取文件

    在项目中经常会用到定时器,在笔试或者面试中也会经常问到定时器和IO流. public class TimerDemo { public static void main(String[] args) ...

  4. 使用Spring Cloud Feign

    使用Spring Cloud Feign作为HTTP客户端调用远程HTTP服务 在spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就 ...

  5. Oracle Data Integrator 12c 安装(ODI安装)

    Oracle Data Integrator 12c 安装(ODI安装) 企业版安装步骤(包含独立安装步骤) 官网下载Oracle Data Integrator 12cR2 (12.2.1.0.0) ...

  6. 企业CIO、CTO必读的34个经典故事

    一. 用人之道 去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀.但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙.弥乐佛热情快乐,所以来的人非常多,但 ...

  7. iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译

    编号 iOS-Apple苹果官方文档翻译名称 博文链接地址 1 苹果API常用英语名词---iOS-Apple苹果官方文档翻译 http://www.cnblogs.com/ChenYilong/p/ ...

  8. CentOS 6.5 下,phpmyadmin 建库无权限

    阿里云主机.用root进入phpMyadmin,居然没有权限建库. 上网查到命令: grant all privileges on *.* to root@'%' identified by &quo ...

  9. 使用 PHPUnit 和 Selenium 进行测试

    适用于 PHP 的 NetBeans IDE 支持 PHPUnit 自动测试.通过 PHPUnit,NetBeans IDE 可为 PHP 提供代码覆盖率,这与 IDE 为 Python 提供的代码覆 ...

  10. springMVC中ajax和后台数据格式错误

    前台ajax: $.ajax("${pageContext.request.contextPath}/hello",// 发送请求的URL字符串. { dataType : &qu ...