《高性能Javascript》学习笔记 之web性能优化（1）

1.数据的访问

  （1）尽量减少对象成员和数组成员的访问
 访问直接量和局部变量速度最快，访问对象成员和数组元素速度较慢。   
  （2）利用局部变量保存全局变量
  全局变量位于作用域链的最深处，访问全局变量会遍历整个作用域链，多次访问同一个全局变量时，可以用局部变量替代全局变量。
  （3）尽量避免嵌套对象成员
  （4）避免使用with，它会改变运行期上下文的作用域链
  使用with会改变作用域链，创建了新的可变对象，放入作用域链的顶端。

2.DOM操作

（1）尽可能的减少DOM的操作
DOM和JS是独立的部分，每次访问DOM都是有代价的。遍历HTML集合时，缓存集合的length，把集合转换成数组访问更快；多次访问同一个DOM属性或方法时，可以用局部变量缓存。
（2）使用innerHTML替代DOM原生的document.createElement()
（3）尽量避免重排和重绘（最小化重排和重绘）
重排：当改变元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，浏览器会使渲染树受影响的部分失效，并重新构造渲染树。
重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕，这叫重绘。

每次重排都会产生计算的消耗。大多数浏览器通过队列化修改并批量执行来优化重排过程，但是，我们可能不知不觉的强制刷新队列，并要求任务立即执行。获取页面的布局信息会导致队列刷新，比如：
offsetWidth 、offsetHeight 、ScrollTop、clientTop等等。

 1）当我们需要对DOM进行一系列操作时，可以利用批量修改DOM的方法优化：

方法一：隐藏元素，应用修改，重新显示
方法二：使用文档碎片（推荐，产生的DOM遍历和重排次数最少）
方法三：将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素

2） 缓存布局信息：
当我们查询布局信息时，比如获取偏移量（offsets），滚动位置（scroll values），浏览器会刷新队列并应用所有变更
，最好的做法是尽量减少布局信息，获取后把它赋值给局部变量，然后操作局部变量。
3）让元素脱离动画流：

（4）利用事件委托绑定事件
当页面中存在大量元素，而且每个都要一次或者多次绑定事件时，最好使用事件委托提高性能。