版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_38102188/article/details/84987630
这里对我目前了解的DOM API createElement和createDocumentFragment进行简单的阐述:
- createElement()
该方法一般带有一个标签名参数,用于创建nodeType=1的元素节点,如:
var div = document.createElement('div')
- createDocumentFragment()
该方法不带参数,用于创建nodeType=11的文档片段节点,如:
var ftagment = document.createDocumentFragment()
创建的fragment不在主DOM树中,且它本身不作为一个DOM节点,而是一个容器,将其他的子节点包含其中。因为它不在主DOM树中这个特点,当需要在其中添加大量的子节点的时候,最后再将其添加到主DOM树中并不会引起页面中元素的回流和重绘,因此可以提升页面性能。
这里要注意的是,用createDocumentFragment生成的fragment只能append一次,即只能被放进DOM树中一次(这里貌似跟内存有关,不是很清楚)
回流:元素的位置/尺寸/内容发生变化,或者激活CSS伪类(例如::hover),或者查询某些属性或调用某些方法(这篇文章中有对应的这些方法)会引起回流。
重绘:元素的颜色/背景色/可见性等不影响其位置的属性发生变化会引起重绘。
因此,当对页面性能要求比较高市,可尽量采用createDocumentFragment方法来动态生成文档片段。