document.createElement和document.createDocumentFragment

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_38102188/article/details/84987630

这里对我目前了解的DOM API createElement和createDocumentFragment进行简单的阐述：

1. createElement()
   该方法一般带有一个标签名参数，用于创建nodeType=1的元素节点，如：

var div = document.createElement('div')

2. createDocumentFragment()
   该方法不带参数，用于创建nodeType=11的文档片段节点，如：

var ftagment = document.createDocumentFragment()

创建的fragment不在主DOM树中，且它本身不作为一个DOM节点，而是一个容器，将其他的子节点包含其中。因为它不在主DOM树中这个特点，当需要在其中添加大量的子节点的时候，最后再将其添加到主DOM树中并不会引起页面中元素的回流和重绘，因此可以提升页面性能。

这里要注意的是，用createDocumentFragment生成的fragment只能append一次，即只能被放进DOM树中一次（这里貌似跟内存有关，不是很清楚）

回流：元素的位置/尺寸/内容发生变化，或者激活CSS伪类（例如：:hover），或者查询某些属性或调用某些方法（这篇文章中有对应的这些方法）会引起回流。
重绘：元素的颜色/背景色/可见性等不影响其位置的属性发生变化会引起重绘。

因此，当对页面性能要求比较高市，可尽量采用createDocumentFragment方法来动态生成文档片段。