DOM加载过程:
layout: 重新计算布局——效率低
只要改变DOM树上的元素,都会重新layout——效率更低
如何减少layout的次数:先在内存中拼凑要添加的DOM子树,然后一次性挂到页面,只会触发一次layout——效率提高
目前前端三大框架中的 vue 与 React 采用的虚拟DOM思想,就是在极大的程度上减少了layout的次数。
把要生成的DOM存在文档片段中,最后挂载到DOM树上
文档片段: 内存中临时存储一个DOM子树的临时父节点,用法和普通父节点完全一样
可将DOM子树整体挂到DOM树上,但自己不出现在DOM中
何时使用: 同时添加多个平级元素时,都要先放在文档片段中,再将文档片段整体挂到页面
如何使用: 3步:
1、创建文档片段对象:
var frag=document.createDocumentFragment();
2、将平级子元素,追加到文档片段中
frag.appendChild(elem)
3、将文档片段挂到DOM树上指定父节点下
parent.appendChild(frag);