js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素
提高页面效率 var d1 = new Date();
//创建十个段落,常规的方式
for(var i = ; i < ; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild (oTxt);
document.body.appendChild(p);
}
var d2 = new Date();
document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime())); //使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document.createDocumentFragment();
for(var i = ; i < ; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
pFragment.appendChild(p);
}
document.body.appendChild(pFragment);
var d4 = new Date();
document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));
js文档碎片的更多相关文章
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- JS JavaScript中的文档碎片 DocumentFragement JS性能优化
文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
- 文档碎片及xml讲解
1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...
- JS中文档碎片的理解和使用
1.我们要明白当js操作dom时发生了什么? 每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减 ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
随机推荐
- c语言实现xor加密
异或运算:^ 定义:它的定义是:两个值相同时,返回false,否则返回true.也就是说,XOR可以用来判断两个值是否不同. 特点:如果对一个值连续做两次 XOR,会返回这个值本身. ^ // 第一次 ...
- 看了一下unity5.6的新功能 以及Timeline
3月31日unity5.6发布,然而timeline(前sequence模块)被delay到unity 2017.上个星期官方又发布了unity 2017的beta版本 抽空看了下 (unity5.6 ...
- 【Unity】7.5 移动设备输入
分类:Unity.C#.VS2015 创建日期:2016-04-21 一.简介 在iOS和Android系统中,操作都是通过触摸来完成的.Input类中对触摸操作的方法或变量如下图所示: 通过GetT ...
- UITableView当数据很少的时候,去掉多余的cell分割线
转自:http://www.cnblogs.com/bucengyongyou/archive/2012/10/15/2723814.html 在tableView初始化的时候 UIView *v = ...
- elasticsearch简介和倒排序索引介绍
介绍 我们为什么要用搜索引擎?我们的所有数据在数据库里面都有,而且 Oracle.SQL Server 等数据库里也能提供查询检索或者聚类分析功能,直接通过数据库查询不就可以了吗?确实,我们大部分的查 ...
- scikit-learn:6. Strategies to scale computationally: bigger data
參考:http://scikit-learn.org/stable/modules/scaling_strategies.html 对于examples.features(或者两者)数量非常大的情况, ...
- 【小白的CFD之旅】20 计算区域的构建
计算域是什么计算域如何创建常用的建模软件计算域几何的特殊之处具体的计算域提取方法小白总结 自从上次在食堂听了小牛师兄关于计算网格的一些问题后,小白决定在寒假期间好好的补习一下关于计算网格的划分内容.在 ...
- ubuntu 16.04 root 初始密码设置
()默认root密码是随机的,即每次开机都有一个新的root密码.我们可以在终端输命令 sudo passwd,然后输入当前用户的密码,enter ()终端会提示我们输入新的密码并确认,此时的密码就是 ...
- 每日英语:How to Save Detroit
Detroit is beautiful-though you probably have to be a child of the industrial Midwest, like me, to s ...
- Eclipse Alt+/ 智能提示失效
Eclipse3.7 自动提示Alt+/不能导入包,且General->Keys->content assist中已经检查并无快捷键冲突 Eclipse中window->Prefe ...