性能优化（一）

链接网址：http://www.cnblogs.com/yepbug/p/5427213.html
http://kb.cnblogs.com/page/534571/
性能优化：不仅要避免去操作DOM，还要减少去访问DOM的次数。
我们经常说DOM节点的操作会增加开销，让程序变慢，为什么呢？
我的理解是：html中的每一个节点都属于一个对象，有文档节点、文本节点，属性节点、注释节点、还有我们一系列的元素节点等，这里并不是说操作这些节点让程序变慢，而是说操作这些节点让我们的浏览器的默认行为得到了重绘/重计算等，主要是layout和paint比较费时（布局和重绘，要加载资源当然慢啦）。
浏览器渲染引擎模块渲染页面：
<pre>
解析HTML，并生成一棵DOM tree
解析各种样式并结合DOM tree生成一棵Render tree
对Render tree的各个节点计算布局信息，比如box的位置与尺寸
根据Render tree并利用浏览器的UI层进行绘制
</pre>
耗时所以要减少，怎样减少呢？
先理解什么时候才进行这些layout和paint的操作
在HTML第一次被加载的时候，会有一次layout之外，js脚本的执行和样式的改变同样会导致浏览器执行layout。一般来说，浏览器在js代码执行的时候并不会进行dom树的layout，在js代码执行完毕后，会进行重新计算，重新对页面进行布局。【这里可以联想到我们的ajax操作，就是为了减少页面的重新布局的开销，从而进行局部的刷新。】，但是我们又希望在进行js的操作时页面进行相应，这样无疑增加了浏览器的负担，开销变大，这就是DOM性能问题的关键所在。
什么情况下将触发浏览器的layout：
<pre>
通过js获取需要计算的DOM属性
添加或删除DOM元素
resize浏览器窗口大小
改变字体
css伪类的激活，比如:hover
通过js修改DOM元素样式且该样式涉及到尺寸的改变
</pre>
我们可以通过谷歌浏览器（F12）查看当增加了DOM操作时，layer的开销变化。

image.png