如何将HTML字符转换为DOM节点并动态添加到文档中(2)

const template = "<div>hello</div>"; function createDocumentFragment() { let frag = document.createRange().createContextualFragment(template); return frag; } // createDocumentFragment(); const container = document.getElementById('container'); let start = Date.now(); for (let i = 0; i < 100000; i++) { container.appendChild(createDocumentFragment()); } console.log(Date.now() - start);

上面的代码我们测算动态添加10万个节点。结果如下：

测试1000个节点耗时20毫秒，测试10000个节点耗时10001毫秒，测试100000个节点耗时46549毫秒。

1.2.2 DocumentFragment

上面我们已经介绍过DocumentFragment了，利用它转换字符串。下面我们利用该对象来作为临时容器，一次性添加多个节点。

利用document.createDocumentFragment()方法可以创建一个空的DocumentFragment对象。

const template = "<div>hello</div>"; function createDocumentFragment() { let frag = document.createRange().createContextualFragment(template); return frag; } // createDocumentFragment(); const container = document.getElementById('container'); let fragContainer = document.createDocumentFragment(); let start = Date.now(); for (let i = 0; i < 1000; i++) { fragContainer.appendChild(createDocumentFragment()); } container.appendChild(fragContainer); console.log(Date.now() - start);

测试1000个节点耗时25毫秒，10000个节点耗时2877毫秒，100000个节点浏览器卡死。

1.3 小结

简单了介绍了几种方法，并没有什么技术含量。但是从动态添加节点来看，网上说的DocumentFragment方法性能远远好于直接append的说法在我的测试场景中并不成立。

DocumentFragment正确的应用场景应该是作为虚拟DOM容器，在频繁修改查询但是并不需要直接渲染的场景中。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章: