document.createDocumentFragment 以及创建节点速度比较
2024-10-18 22:29:09
document.createDocumentFragment
document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。
DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素代替。
因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用。
比如下面这个示例,给一个ul添加10000个li,先用拼接字符串的方式来实现:
let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul') document.body.appendChild(newUlEle) for (let i = 0; i < 10000; i++) {
str += '<li>第' + i + '个子节点</li>'
} newUlEle.innerHTML = str console.log('耗时' + (Date.now() - start) + 'ms');
多次刷新,可以看到创建10000
个li
时,渲染所需要的时间如下图:
把上面的示例,换成append()
的方式,逐个添加对应的li
:
let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul') document.body.appendChild(newUlEle) for (let i = 0; i < 10000; i++) {
let liEle = document.createElement('li') liEle.textContent = '第' + i + '个子节点'
newUlEle.appendChild(liEle)
} console.log('耗时:' + (Date.now() - start) + 'ms')
这种方法所费时间如下图:
都说第二种方法要比第一种方法耗时,看上去有点像。接下来再来看createDocumentFragment
的方法。可以预见的是,这种方法肯定比第二种强,但应该没有第一种快:
let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul') document.body.appendChild(newUlEle) let fragment = document.createDocumentFragment() for (let i = 0; i < 10000; i++) {
let liEle = document.createElement('li') liEle.textContent = '第' + i + '个子节点'
fragment.appendChild(liEle)
} newUlEle.appendChild(fragment) console.log('耗时:' + (Date.now() - start) + 'ms')
转自:https://blog.csdn.net/yusirxiaer/article/details/80169070
最新文章
- 企业商务差旅信息化管理与移动App
- Android笔记:DrawerLayout抽屉布局的使用
- Silverlight 上传文件源代码
- Javascrip操作json方法
- ASP.NET MVC从客户端中检测到有潜在危险的 Request.Form 值
- C# and android and socket
- Linux RCU机制详解
- node.js后台快速搭建在阿里云(一)(express篇)
- JS自定义对象以及相关成绩系统完整案例演示
- JavaScript new Boolean(false) 其实是true
- springboot~Integer和int如何选择,Integer的意义何在
- 关于oracle 索引,收藏
- java中的内存空间 堆和栈
- 【洛谷p1164】小A点菜
- js 产生随机数
- 在CentOS和RHEL中配置SNMPv3
- jap 事务总结
- MQTT的学习研究(七)基于HTTP POST MQTT 发布消息服务端使用
- Selenium打开IE报错“Protected Mode settings...”解决方法
- script加载之defer和async