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.这个可以参考之前的博客& ...
随机推荐
- Entity Framework 异常: 'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效。\r\n关键字 'AS' 附近有语法错误。
在使用 EF 的时候,突然发现更新后在服务器中运行出错,异常信息主要包含以下信息: 'OFFSET' 附近有语法错误.\r\n在 FETCH 语句中选项 NEXT 的用法无效.\r\n关键字 'AS' ...
- /etc/ssh/sshd_config 关建字:PermitRootLogin no 禁示以root身份登录服务器
这种情况,不会影响,普通用户su到root
- iptables防火墙与日志系统配合使用 监控服务器特点端口的防问源IP
/etc/sysconfig/iptables -A INPUT -p tcp --dport 80 -j LOG --log-level 5 --log-prefix "PORT_80:& ...
- 行为类模式(六):备忘录(Memento)
定义 在不破坏封闭的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. UML 优点 将被存储的状态放在外面,不要和关键对象混在一起,可以帮助维护内 ...
- 菜鸟学Java(十七)——Jboss瘦身
大家在用Jboss的时候可能跟我一样,觉得Jboss启动实在太慢!比起Tomcat几乎秒启的速度,Jboss几乎让人无法忍受.加上本人电脑配置比较低,Jboss启动最快的时候也是一分多钟,慢的时候四分 ...
- 关于chrome的开发调试方式
chrome://inspect/#devices 调试移动设备app chrome://version 查看chrome浏览器版本信息 chrome://components/ 查看组件信息 上面的 ...
- Android 支付宝接口调用
在近期,公司需要开发一个关于在线支付的模块,所以需要用到第三方支付平台 转载请注明出处:http://blog.csdn.net/ht_android/article/details/45307165 ...
- [DIOCP3/MyBean/QDAC开源项目] DataModule-DB例子基于MyBean的插件实例<三层数据库方案>
[说明] 这个例子答应大家很久了,一直没有时间弄,现在正式结合MyBean插件可以很方便的在客户端共享操作连接,执行数据库的各项工作,屏蔽了底层的通信解码器编码等工作,直接传递Variant,给了开发 ...
- js 数组的增删改查
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- jsdoc注释规范工具(使用 JSDoc 3 自动生成 JavaScript API 文档)
安装和使用规范见:http://moodpo.com/archives/jsdoc3-tutorial.html 实例: /** * 模块调用方法 * * * @param {string} modu ...