DOM是js的一个对象，严格的说并不是操作这个对象耗费资源，而是操作这个对象之后会触发浏览器的一些操作（layout（reflow）和paint）耗费资源；
首先我们要说到浏览器是如何呈现一个页面的
1、解析HTML，并生成一颗DOM树
2、解析CSS样式，结合DOM树生成一颗render树
3、对render树的各个节点计算布局信息，比如位置和尺寸
4、根据render树，并利用浏览器的UI层进行绘制
paint是一个耗费资源的事情，但是layout更是一个耗费资源的事，我们要优化前端，那么就得减少layout，我们接下来看一看什么操作会触发layout
1、调整窗口大小
2、改变字体
3、增加、删除样式表
4、添加、删除DOM元素
5、激活伪类
6、修改DOM元素样式，且样式涉及到尺寸的改变
我们来直观感受一下操作DOM有多耗费资源
ab var div = document.getElementById('parent');
function a(){
console.time('a')
for(var i=0;i<5000;i++){
div.innerHTML +='a';
}
console.timeEnd('a');
}
function b(){
console.time('b')
var re = '';
for(var i=0;i<5000;i++){
re+='b';
}
div.innerHTML = re;
console.timeEnd('b');
}
两个按钮，均是5000次循环，操作DOM在循环内部和外部时间对比
