高性能Javascript注意点

重绘和重排

当下载完页面后，浏览器会解析文件病穿件两个内部数据结构，一个DOM树，一个渲染树。根据两棵树，浏览器来渲染页面。
当页面的DOM几何属性（改变宽高）改变时，浏览器会使受到影响的树失效，然后重构渲染树，这个过程叫做重排(reflow)。
当非几何属性，例如背景颜色，改变时，页面布局没有改变，只需要重新绘制，叫做重绘（repaint）。

重排的情况

1. 添加或者删除可见DOM元素

display:none reflow and repaint  
visibility: hidden repaint  

2. 元素位置改变
3. 元素尺寸改变（M P B W H）
4. 内容改变
5. 页面最初的渲染
6. 浏览器尺寸改变

影响因素与解决方法

1. 查询强制刷新渲染

offsetTop/offsetLeft/offsetWidth/offsetHeight -> nearest relative  
scrollTop ......-> 元素scroll量  
clientTop ......-> border量，不包括padding 和margin  
getComputedStyle  

2. 最小化重排与重绘
   例如
   多次修改css 用 cssText或者修改类名而不是修改属性
   批量修改dom元素是先讲元素摘除（隐藏display:none；新建一个脱离文件流的dom再append上去；clone 节点，操作后replace）

3. 缓存布局信息
   将布局信息缓存给变量，而不是一次次读取从而导致一次次强制重绘

4. 为动画将元素提出
   将元素先定位为absolute 然后进行动画，它会重绘页面但是只是一小部分，避免了重排和整个页面重绘。最后重新定位

5. 当图标是尽量避免:hover forIE8

6. 事件托管（？）利用冒泡原理，需要考虑各个浏览器的兼容性

算法

1. 循环

for(){}  
do{}while()  
while(){}  
for(var in ){}  

其中for-in开销很大，尽量少用
减少循环中的工作量
倒序
达夫设备
一个针对此章节的测试
http://blog.sina.com.cn/s/blog_8f49f0060100wwj1.html
基于函数的迭代

2. 条件表达式 if-else vs switch
if-else 适用于种类少的时候，种类多的时候用switch性能更好
   对于if-else 来说先写最可能的情况，使用二分法做if-else性能比较高
   当大量数据是，可以用查表法（类似hash？）

3. 递归
   递归最大的问题是调用栈限制，某些浏览器可以用try{}catch(e){}解决
   递归都可以改为迭代
   或者使用制表法