New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

初识createDocumentFragment #4

Open
zhaoqize opened this Issue Nov 27, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@zhaoqize
Owner

zhaoqize commented Nov 27, 2017

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

createDocumentFragment介绍

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

createDocumentFragment使用

let frame = document.createDocumentFragment();

image

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

image

createDocumentFragment的性能

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

拓展

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

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

最后

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

参考

@zhaoqize zhaoqize added Blog DOM labels Nov 27, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment