如果我用
Javascript创建了很多DOM元素,是否将它们添加到documentFragment然后将片段添加到文档中,提供比将它们添加到未附加元素然后将该元素添加到DOM更好的性能?即
var el; var i = 0; var fragment = document.createDocumentFragment(); while (i < 2000) { el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; fragment.appendChild(el); i++; } document.appendChild(fragment);
与
var el; var i = 0; var container = document.createElement('div'); while (i < 2000) { el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; container.appendChild(el); i++; } document.appendChild(container);
(注意:这只是一个简化的例子,在我的实际代码中我添加了许多表行和表元素.)
谢谢
解决方法
我刚刚测量到了这一点:
function f1(){ console.time("f1") let e = document.createElement("div") for(let i=0; i < 100000; i++){ let a = document.createElement("a") e.appendChild(a) } console.timeEnd("f1") } function f2(){ console.time("f2") let e = document.createDocumentFragment() for(let i=0; i < 100000; i++){ let a = document.createElement("a") e.appendChild(a) } console.timeEnd() console.timeEnd("f2") }
documentfragment相关性更快:
f1: 494.0458984375ms f2: 346.35009765625ms
这是chrome,firefox是类似的.
我以为会是一样的.下一个问题是开销来自哪里.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。