初识createDocumentFragment

[zhaoqize]

最近在看Vue1.x源码的时候，发现一个方法document.createDocumentFragment()，所以花点时间了解一下。

createDocumentFragment介绍

createDocumentFragment 用来创建 空的文档片段节点，在插入 dom 的时候 插入的只有其 子孙节点，其本身不插入，也就不占用资源了。

createDocumentFragment使用

let frame = document.createDocumentFragment();

let pEle = document.createElement('p');
let textEle = document.createTextNode('这是一段测试数据zqz');

createDocumentFragment的性能

关于性能的探索，建议参看这篇文章document.createDocumentFragment的探索之旅(上)(由于原文链接失效，请访问:http://ju.outofmemory.cn/entry/249677)

拓展

当然除了 createDocumentFragment 可以动态创建 dom 节点，还有 createElement 也可以。

这里有篇关于各种动态渲染Element方式 的性能探究 几乎感觉把所有的都列举出来，并做了比较。

最后

其实在Vue2.3.2版本中，createDocumentFragment 已经被 createElement 取代了。

参考

• document.createDocumentFragment的探索之旅(下)