JavaScript中的文档碎片DocumentFragment
来源:互联网 发布:gta5亚洲美女捏脸数据 编辑:程序博客网 时间:2024/05/22 05:52
前言:时隔两年又一次接触到文档碎片,还记得当时blue老师讲文档碎片的时候,自己仍然是记忆犹新。学习了这个知识点以后,从来没有用过,这次在看书的时候看到这个东西了,想着还是来总结一下吧,说不定后面在哪个项目都用到了(主要原因是以前写网站都没有考虑到性能优化,现在还是的考虑一下这个问题啦)
文档碎片是什么东西
如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的。但是如果我们使用文档碎片了,我们可以先将100个li添加到文档碎片中,然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。
文档碎片的具体应用
在一个ul中添加100个li
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>welcome</title> <style> </style></head><body> <ul id="ul"></ul> <script type="text/javascript"> window.onload = function() { var oLi; var oText; var oUl = document.querySelector("#ul"); var oFragment = document.createDocumentFragment(); for(var i=1; i<=100; i++) { oLi = document.createElement("li"); oText = document.createTextNode(i); oLi.appendChild(oText); oFragment.appendChild(oLi); } oUl.appendChild(oFragment) } </script></body></html>
(完)
阅读全文
0 0
- JavaScript中的文档碎片DocumentFragment
- JavaScript DocumentFragment(文档碎片)
- javascript Dom: documentFragment 文档碎片对象
- js文档碎片---DocumentFragment
- DocumentFragment(创建文档碎片节点)
- Javascript DocumentFragment 文档片段
- 简单了解文档碎片DocumentFragment的使用
- jquery源码解析(第2章之文档碎片DocumentFragment)
- javascript-文档碎片
- JS中的文档碎片
- 【JavaScript】利用文件碎片DocumentFragment改进兼容IE6可调可控的图片滑块
- 【JavaScript学习】DOM:DocumentFragment类型
- JavaScript 性能优化之文档碎片
- DocumentFragment
- DocumentFragment
- JavaScript权威指南_131_第15章_脚本化文档_15.6-创建、 插入、删除节点-DocumentFragment
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
- DocumentFragment 对象在性能优化中的应用
- JQuery中css与attr的比较
- 两个数的乘积
- Dynamic OCT 和 Dynamic ODT 详细说明
- G
- excel
- JavaScript中的文档碎片DocumentFragment
- 1. Two Sum
- 我的学习记录33
- shell脚本部分基础详解
- Throwable#initCause(Throwable) 方法
- ButterKnife
- 分析下面代码有什么问题?
- F
- 个人笔记——杂七杂八