document文档碎片
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<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<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文档碎片的更多相关文章
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
- 有关文档碎片(document fragment)的使用方法
通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意 味着将DOM的改变分批处 ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- 文档碎片及xml讲解
1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...
- js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...
- 文档碎片DocumentFragment
文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...
随机推荐
- python学习之IO:
输入输出兼程IO操作,有同步(速度不匹配时四等)和异步(轮询和消息通知,复杂而高效) 一 文件操作函数: 文件打开:f=open("文件路径“,“操作类型 r/rb/w/a”,"编 ...
- WebService_Demo
简述 使用IDEA开发webservice服务,从零开始一步一步指引你. 服务端开发 首先创建一个webservice项目,如下图 创建完项目后idea会帮我们创建一个类,helloword,我们把它 ...
- java定时读取文件
在项目中经常会用到定时器,在笔试或者面试中也会经常问到定时器和IO流. public class TimerDemo { public static void main(String[] args) ...
- 使用Spring Cloud Feign
使用Spring Cloud Feign作为HTTP客户端调用远程HTTP服务 在spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就 ...
- Oracle Data Integrator 12c 安装(ODI安装)
Oracle Data Integrator 12c 安装(ODI安装) 企业版安装步骤(包含独立安装步骤) 官网下载Oracle Data Integrator 12cR2 (12.2.1.0.0) ...
- 企业CIO、CTO必读的34个经典故事
一. 用人之道 去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀.但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙.弥乐佛热情快乐,所以来的人非常多,但 ...
- iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译
编号 iOS-Apple苹果官方文档翻译名称 博文链接地址 1 苹果API常用英语名词---iOS-Apple苹果官方文档翻译 http://www.cnblogs.com/ChenYilong/p/ ...
- CentOS 6.5 下,phpmyadmin 建库无权限
阿里云主机.用root进入phpMyadmin,居然没有权限建库. 上网查到命令: grant all privileges on *.* to root@'%' identified by &quo ...
- 使用 PHPUnit 和 Selenium 进行测试
适用于 PHP 的 NetBeans IDE 支持 PHPUnit 自动测试.通过 PHPUnit,NetBeans IDE 可为 PHP 提供代码覆盖率,这与 IDE 为 Python 提供的代码覆 ...
- springMVC中ajax和后台数据格式错误
前台ajax: $.ajax("${pageContext.request.contextPath}/hello",// 发送请求的URL字符串. { dataType : &qu ...