js文档碎片---DocumentFragment
来源:互联网 发布:辐射4捏脸数据放哪 编辑:程序博客网 时间:2024/05/21 15:04
当我们操作html节点时候,很多情况是需要大量添加DOM元素,如果是不断地使用appendChild插入子节点方式,性能会大打折扣。所以我们应该使用文档碎片,一种轻量级文档处理方式,但是并没有所谓的文档碎片标签。
文档碎片可以当作仓库,缓存使用。
看例子代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DocumentFragment文档碎片</title></head><body> <div id="test"></div> <div id="test2"></div> <script> function a1() { var time1 =( +new Date()); for (var i = 0; i < 5000; i++) { var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body.appendChild(op); } document.getElementById('test').innerHTML = '<br><div>普通方式创建耗时'+ ( +new Date() - time1); } function a2() { var oFragmeng = document.createDocumentFragment(); //创建文档碎片 var time2 =( +new Date()); for (var i = 0; i < 5000; i++) { var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); oFragmeng.appendChild(op); } document.body.appendChild(oFragmeng); //最后一次性添加到document中 document.getElementById('test2').innerHTML = '<br><div>文档碎片创建耗时'+ ( +new Date() - time2); } a1(); a2(); </script></body></html>
上面例子,性能区别可以忽略,也许是文档碎片需要繁重大量的DOM操作优势才能体现吧!?文档碎片能够加快dom元素操作,当然也可以使用一个div标签,将所有元素添加到div上面,再添加到目标节点上,性能差不多。所以是否需要使用文档碎片,看实际情况吧。
参考链接:http://www.cnblogs.com/sxhlf/p/7027208.html
阅读全文
0 0
- js文档碎片---DocumentFragment
- JavaScript DocumentFragment(文档碎片)
- DocumentFragment(创建文档碎片节点)
- JavaScript中的文档碎片DocumentFragment
- javascript Dom: documentFragment 文档碎片对象
- 简单了解文档碎片DocumentFragment的使用
- jquery源码解析(第2章之文档碎片DocumentFragment)
- js创建文档碎片
- js--文档碎片
- JS中的文档碎片
- Javascript DocumentFragment 文档片段
- JS 文档碎片 添加元素
- DocumentFragment
- DocumentFragment
- js事件委托和文档碎片
- JS性能优化之文档碎片创建
- 关于JS中文档碎片的理解
- javascript-Doctype, img图片预加载, js文档碎片
- CodeForces-191A Dynasty Puzzles(动态规划DP)
- 近期计划
- [BZOJ]2282: [Sdoi2011]消防 树的直径+单调队列
- java resp.sendRedirect(); 页面没有跳转的原因
- 安装oracle 11g 客户端,检查过程中报物理内存不足等错误
- js文档碎片---DocumentFragment
- 62. Unique Paths
- JDK9/java9: flow feature
- 九月英语总结
- BZOJ1031 [JSOI2007] 字符加密Cipher
- 【BZOJ】1010 [HNOI2008] 玩具装箱toy 斜率优化DP
- mysql 命令行对文件进行读写操作
- 一个有趣的统计 后续
- 机器学习(2)——神经网络