很多人都知道：因为操作DOM代价大、耗性能，所以要尽量减少DOM操作，但是，为什么代价大？耗性能呢？目前的硬件水平比当年高出好几倍了还需要这么做吗？
下面，就我看过的资料整理如下：
一、DOM其实就是一个javascript对象，每个DOM节点就是这个对象里面的属性。所以，操作DOM其实就是修改js对象的属性值（就好比：js.a = "b"），这个js对象改变后，会触发一些浏览器的行为，这个行为（比如layout和paint）就是代价大、耗性能的罪魁祸首了。
首先，从浏览器层面入手，有渲染引擎和js引擎（具体请看各浏览器内核汇总）。
渲染引擎工作：
- 解析HTML代码，生产DOM tree
- 解析CSS样式，结合DOM tree生产Render tree（display: none;的结点不会存在Render tree上，最后不会被paint）
- 计算Render tree各个节点的布局信息，比如box的位置、尺寸、颜色、外形等
- 根据计算后的布局信息，调用浏览器的UI引擎进行渲染。
上图为Gecko内核（Opera浏览器12.17以前的版本）的渲染流程
上图为Webkit内核（Chrome 28以前版本和Safari）的渲染流程
layout（布局）和paint（绘制）是代价最大的，layout就是布局变动造成重新计算（耗CPU，有时也很耗内存），paint就是调用浏览器UI引擎进行渲染展示页面（耗CPU和内存）。paint设计到另一个引擎的细节，暂不讨论（先当成是java中用awt绘制panel一样耗性能耗资源吧）。下面详细说下layout如何耗性能耗资源：
layout（布局），主要是计算文档中元素的位置、大小等信息，是渲染工作的第三步。
在HTML被加载时会进行layout，样式改变会导致layout，js执行的时候涉及到布局信息都会导致layout，估计这时候快疯了，那么多样式，每个样式、每个js都layout一次，岂不是一个页面要layout几百万次。。。哈哈，别担心，浏览器还是精明的，对于layout行为是lazy的，不会傻到每个样式进行一次layout，对于CSS和JS都会把需要layout行为的数据缓存到一个队列中，当上下文完成执行后进行一次layout（css比如：结点的样式描述完。js比如：一个代码块执行完）。
浏览器的lazy会带来另外一个问题，layout信息在队列中的时候，我需要获取DOM节点信息就获取不到了，这时候浏览器就会提前执行一次layout，这就是DOM操作耗性能耗资源的罪魁祸首。
导致提前layout的常见情况（通过chrome浏览器自带的控制台可以看到）：
1、通过js获取DOM属性
2、增/删/DOM节点
3、改变浏览器窗口大小
4、改变字体
5、激活css伪类
6、修改DOM的属性，涉及到大小、位置等（该颜色不会激活提前的layout）
7、其他js操作。。。
还有，特别重要的。。。动画的每一帧都会导致layout，为了减少动画带来的layout性能损失，可以动画元素绝对定位，使其脱离文本流。另外，requestAnimationsFrame也可以把layout积累后进行。另外，HTMLCollection对象最好缓存，否则layout次数将乘以数组的长度系数，还有就是减少DOM元素的嵌套深度，并优化CSS的深度。
根据性能测试（呵呵，别人测的，我没测过）显示，假设DOM元素为5千（业内好像都以这个为临界点），减少DOM操作，可以大大减少客户端的性能消耗，假如是手机端更为明显，如DOM操作太频繁，手机端会因内存爆满或CPU占用过度而出现浏览器闪退现象。
这还只是layout造成的性能问题。。。paint造成的性能问题同样严重。。。然而。。。时代在进步，硬件水平突飞猛进，其实，只要内存有4G，CPU是双核1.8G以上，用最新的浏览器，就不用考虑这些问题啦，233~~~
参考资料：
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
测试方式：
https://jsperf.com/getelementsbyclassname-vs-queryselectorall/162
http://jsperf.com/getelementbyid-vs-queryselector/218
来源：oschina
链接：https://my.oschina.net/u/1580821/blog/744684