优化DOM得从重绘和重排讲起，long long ago...
1、重绘和重排 1.1 重绘和重排是什么
重绘是指一些样式的修改，元素的位置和大小都没有改变；
重排是指元素的位置或尺寸发生了变化，浏览器需要重新计算渲染树，而新的渲染树建立后，浏览器会重新绘制受影响的元素。
1.2 浏览器渲染页面去参加面试总会被问到一个问题，那就是“向浏览器输入一行url会发生什么？”，这个问题的答案除了要回答网络方面的知识还牵扯到浏览器渲染页面问题。当我们的浏览器接收到从服务器响应的页面之后便开始逐行渲染，遇到css的时候会异步的去计算属性值，再继续向下解析dom解析完毕之后形成一颗DOM树，将异步计算好的样式（样式盒子）与DOM树相结合便成为了一个Render树，再由浏览器绘制在页面上。DOM树与Render树的区别在于：样式为display:none;的节点会在DOM树中而不在渲染树中。浏览器绘制了之后便开始解析js文件，根据js来确定是否重绘和重排。
1.3 引起重绘和重排的原因产生重绘的因素：
改变visibility、outline、背景色等样式属性，并没有改变元素大小、位置等。浏览器会根据元素的新属性重新绘制。
产生重排的因素：
内容改变
文本改变或图片尺寸改变
DOM元素的几何属性的变化
例如改变DOM元素的宽高值时，原渲染树中的相关节点会失效，浏览器会根据变化后的DOM重新排建渲染树中的相关节点。如果父节点的几何属性变化时，还会使其子节点及后续兄弟节点重新计算位置等，造成一系列的重排。
DOM树的结构变化
添加DOM节点、修改DOM节点位置及删除某个节点都是对DOM树的更改，会造成页面的重排。浏览器布局是从上到下的过程，修改当前元素不会对其前边已经遍历过的元素造成影响，但是如果在所有的节点前添加一个新的元素，则后续的所有元素都要进行重排。
获取某些属性
除了渲染树的直接变化，当获取一些属性值时，浏览器为取得正确的值也会发生重排，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()。
浏览器窗口尺寸改变
窗口尺寸的改变会影响整个网页内元素的尺寸的改变，即DOM元素的集合属性变化，因此会造成重排。
滚动条的出现（会触发整个页面的重排）
总之你要知道，js是单线程的，重绘和重排会阻塞用户的操作以及影响网页的性能，当一个页面发生了多次重绘和重排比如写一个定时器每500ms改变页面元素的宽高，那么这个页面可能会变得越来越卡顿，我们要尽可能的减少重绘和重排。那么我们对于DOM的优化也是基于这个开始。