document.createDocumentFragment 以及创建节点速度比较

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');
复制代码

多次刷新,可以看到创建10000li时,渲染所需要的时间如下图:

把上面的示例,换成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

posted @   笠航  阅读(304)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示