document.createDocumentFragment() ,这个fragment是什么
代码1:
<script>
var ul = document.getElementById('myList')
for (let i = 0; i < 3; i++) {
var li = document.createElement('li')
li.appendChild(document.createTextNode('我是' + i))
ul.appendChild(li)
}
</script>代码2:
<script>
var fragment = document.createDocumentFragment()
var ul = document.getElementById('myList')
for (let i = 0; i < 3; i++) {
var li=document.createElement('li')
li.appendChild(document.createTextNode('Item'+i))
fragment.appendChild(li)
}
ul.appendChild(fragment)
</script>两段代码实现的功能一样,有什么区别?为什么要包裹上一层fragment.且在控制台也没有看到fragment标签.
1
收起
正在回答
1回答
你好，
DocumentFragments 是DOM节点，它们不是主DOM树的一部分，所以不会显示在控制台中。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
这两段代码：
（1）使用循环每次将li装填到ul中，分别装填3次，也就是页面结果会改变3次。
（2）使用循环将li先状态到fragment代码片段中，最后再将代码片段装填到ul中，页面结构会改变一次。
因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星