【面向JS--DOM加载过程】

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);