1.减少DOM数量方法

• 使用伪元素，阴影实现尽量不使用DOM实现，比如清除浮动、样式实现等
• 按需加载，减少不必要的渲染
• 结构合理，语义化标签

2.大量DOM时的优化

1. 缓存DOM对象

操作DOM一般先会去访问DOM，尤其像循环遍历这种时间复杂度比较高的操作，可以在循环之前将主节点的DOm节点先获取到，那么就可以在循环里直接饮用，不必重新查询。

let rootEl = document.querySelector("#app");
let childList = rootEl.child;
for(let i = 0;i<childList.length;i++){
	/*处理代码*/
}

2. 文档片段

利用document.createDocumentFragment()方法创建文档碎片节点，创建的是一个虚拟的节点对象。向这个节点添加DOM节点，修改DOM节点并不会影响到真实的DOM结构。

我们可以利用这一点先将我们需要修改的DOM一并修改完，保存至文档碎片中，然后用文档碎片一次性的替换真实的DOM节点，与虚拟DOM类似，同样达到了不频繁修改DOM而导致的重排和重绘。

这样只会触发一次回流，效率得到很大的提升，如果对元素进行复杂的操作，我们应当先将元素从页面中移除，然后在对其进行操作，或者将其复制一个，在内存中进行操作后再替换原来的节点。

let fragment = document.createDocumentFragment();
const operationDomHandle = fragment => {}
operationDomHandle(fragment);
rootEl.replaceChild(fragment,oldDom);

var clone = old.cloneNode(true);
operationDomHandle(clone);
rootEl.replaceChild(clone,oldDom);

3. 用innerHtml代替高频的appendChild

4. 最优的layout方案

批量读，一次性写，先对一个不在render tree上的节点进行操作，再把这个节点添加回render tree。这样只会触发一次DOM操作，使用requestAnimationFrame()，把任何导致重绘的操作放入requestAnimationFrame

5. 虚拟DOM

js模拟DOM树并对DOM树操作的一种技术，vDOM是一个纯js对象，所以对他的操作会更高效。

利用vDOM，将DOM抽象为学你DOM，在DOM发生变化的时候先对虚拟DOM进行操作，通过DOM Diff算法将虚拟DOM和原虚拟DOM的结构做对比，最终批量的去修改真实的DOM结构，尽可能的避免了频繁修改DOM而导致频繁的重排和重绘。