javascript 优化总结(积累中)

1.JS性能优化的基本原则

　1. 尽可能少地减少执行次数。毕竟对解释语言来说，每一个执行步骤，都需要和解释引擎做一次交互。

　2. 尽可能使用语言内置的功能，比如串链接。

　3. 尽可能使用系统提供的API来进行优化。因为这些API是编译好的二进制代码，执行效率很高。

　4. 书写最正确的代码。容错功能是要付出性能代价的。

 

2.JS语言本身的优化

   2.1  变量
   1.尽量使用局部变量。
      因为全局变量其实是全局对象的成员，而局部变量在栈上定义，优先查找，性能相对于全局变量要高。
   2. 尽量在一个语句中做定义变量和赋值。

       var a =1;
        var b = 1;
        var c =1;
        代码长，性能差
        拆成
        var a=1,b=1, c=1;

   3. 省略不必要的变量定义。
      如果变量的定义可以被一个常量替代，就直接使用常量。

 4. 使用Object语法对对象赋值。

     Object的赋值语法在操作复杂对象时效率更高。

　  例如，可以将下面的代码：

car = new Object();

car.make = "Honda";

car.model = "Civic";

car.transmission = "manual";

car.miles = 100000;

car.condition = "needs work";

 

替换成：

 

car = {

make: "Honda",

model: "Civic",

transmission: "manual",

miles: 100000,

condition: "needs work"

}

2.2   对象缓存

1. 缓存对象查找的中间结果。

　因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

 

2. 缓存创建时间较长的对象。

　自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。

2.3 字符串操作

1. 使用"+=" 追加字符串，使用"+"来连接字符串。

　如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

　如果要连接多个字符串，应该使用"+"，如：

　　s+=a;

　　s+=b;

　　s+=c;

　　应该写成

　　s+=a + b + c；

 

2. 连接大量的字符串，应使用Array的join方法。

　如果是收集字符串，最好使用JavaScript数组缓存，最后使用join方法连接起来，如下：

   

var buf = new Array();

for (var i = 0; i < 100; i++)

{

buf.push(i.toString());

}

 

var all = buf.join("");

2.4  类型转换

1. 使用Math.floor()或者Math.round()将浮点数转换成整型。

　浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

　对象查找中的问题不一样，Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

 

2. 自定义的对象，推荐定义和使用toString()方法来进行类型转换。

　对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()。因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高。

2.5 循环的优化

1. 尽可能少使用for(in)循环。

　在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。

2. 预先计算collection的length。

　如：将for (var i = 0; i < collection.length; i++)

　替换成：for (var i = 0, len = collection.length; i < len; i++)

　效果会更好，尤其是在大循环中。

3. 尽量减少循环内的操作。

　循环内的每个操作，都会被放大为循环次数的倍数。所以，大循环内微小的改进，在性能的整体提升上都是可观的。

4. 使用循环替代递归。

　相比循环，递归的效率更差一些。递归的优点是在形式上更自然一些。所以，在不影响代码的维护性的前提下，用循环替代递归。

2.6 其它方面

1. 尽量使用语言内置的语法。

　"var arr = […];"和"var arr = new Array(…);"是等效的，但是前者的效能优于后者。同样，"var foo = {};"的方式也比"var foo = new Object();"快；"var reg = /../;"要比"var reg=new RegExp()"快。

2. 尽量不要使用eval。

　使用eval，相当于在运行时再次调用解释引擎，对传入的内容解释运行，需要消耗大量时间。

3. 使用prototype代替closure。

　使用closure在性能和内存消耗上都是不利的。如果closure使用量过大，这就会成为一个问题。所以，尽量将：

　this.methodFoo = function()

　替换成：

　MyClass.protoype.methodFoo = function()

　和closure存在于对象实例之中不同，prototype存在于类中，被该类的所有的对象实例共享。

4. 避免使用with语句。

　With语句临时扩展对象查找的范围，节省了文字的录入时间，但付出了更多的执行时间。因为每个给出的名称都要在全局范围查找。所以，可以将下面的代码：

with (document.formname)

{

field1.value = "one";

field2.value = "two";

}

变更为：

var form = document.formname;

form.field1.value = "one";

form.field2.value = "two";