Javascript性能优化学习笔记

本文章原文出自http://www.ibm.com/developerworks/cn/web/1107_zhouxiang_tunejs/

1 少使用eval，因为eval中的变量无法预解析

    主要原因是：JavaScript 代码在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用 var 申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是 undefined，并将那些以 function 定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。但是，如果你使用了“eval”，则“eval”中的代码（实际上为字符串）无法预先识别其上下文，无法被提前解析和优化，即无法进行预编译的操作。所以，其性能也会大幅度降低。

 

2 减少变量的调用层数

  （1）在函数内部定义全局变量的映射；

  （2）尽量少使用with，避免增加访问层级

 

3 避免隐式类型转换

 

4 避免reflow和repaint

   详见http://www.ueder.net/2011/01/04/%E5%A6%82%E4%BD%95%E5%87%8F%E5%B0%91%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84repaint%E5%92%8Creflow-%E8%BD%AC/

 （1）避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：
          a 先将元素从document中删除，完成修改后再把元素放回原来的位置
          b 将元素的display设置为”none”，完成修改后再把display修改为原来的值
          c 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

 （2）集中修改样式
         a 尽可能少的修改元素style上的属性
         b 尽量通过修改className来修改样式
         c 通过cssText属性来设置样式值

  （3）缓存Layout属性值

          对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次查找。

  （4）设置元素的position为absolute或fixed

          在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。