之前在红宝石里面看到过，但是用的很少。后来又在高性能里面见到，刚刚一查，结果vue里面也用了文档片段。看来自己还是太忽略这玩意儿的作用了。
还是写个文章来了解一下。
想象一个场景，我创建一个新元素，然后把它appendChild到文档中。看起来好像没什么问题，如果需要创建100个元素呢？1000个？那这个页面的性能可以说把用户都赶跑了。
文档片段就是来帮助我们，把创建的一大堆新元素都放在文档片段中，然后提交给文档中。
特别注意两个点：
- 当把文档片段插入DOM树的时候，只会把它的子节点插进去，它作为容器本身是不会进入DOM树的。
- 当把DOM树种的节点插入文档片段的时候，这些节点，会真的从DOM树种消失。我们也把这个过程叫做劫持。
类比的话，就好像自助餐厅，文档片段是我们的托盘，先在取餐区里面把想要的东西都放在托盘里面，也可以把自己桌子上已经有的东西放在托盘里，再把托盘里的全部东西都放在饭桌上，当然托盘本身不需要哦~
对性能提升很有帮助哦，也可以减少重排。
在Vue中的作用
上边说清楚了documentFragment是干嘛的，现在说说他在vue中的作用。
每个vue实例都有一个根元素id的属性el，Vue对象通过它来找到要渲染的部分。之后使用createDocumentFragment()方法创建一个documentFragment，遍历根元素的所有子元素，依次劫持并插入文档片段，将根元素掏空。然后执行Vue的编译：遍历documentFragment中的节点，对其中的v-for,v-text等属性进行相应的处理。最后，把编译完成后的documentFragment还给根元素。
扫描二维码关注公众号，回复：
5544313 查看本文章
这也就是为什么，我们写在模板中的HTML，有v-for,v-model等属性，而实际页面F12之后却没有，因为那是Vue编译之后返回的结果。