.NET性能优化方面的总结（4） JavaScript

.NET性能优化方面的总结（4） JavaScript

    4.1 JScript性能优化的基本原则
    1. 尽可能少地减少执行次数。毕竟对解释语言来说，每一个执行步骤，都需要和解释引擎做一次交互。
    2. 尽可能使用语言内置的功能，比如串链接。
    3. 尽可能使用系统提供的API来进行优化。因为这些API是编译好的二进制代码，执行效率很高。
    4. 书写最正确的代码。容错功能是要付出性能代价的。

    4.2 JScript语言本身的优化
    4.2.1 变量
    1. 尽量使用局部变量。
    因为全局变量其实是全局对象的成员，而局部变量在栈上定义，优先查找，性能相对于全局变量要高。

    2. 尽量在一个语句中做定义变量和赋值。

    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"
}

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

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

    4.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( "" );

    4.2.4 类型转换
    1. 使用Math.floor()或者Math.round()将浮点数转换成整型。
    浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。
对象查找中的问题不一样，Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

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

    4.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. 使用循环替代递归。
相比循环，递归的效率更差一些。递归的优点是在形式上更自然一些。所以，在不影响代码的维护性的前提下，用循环替代递归。

    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 " ;

    4.3 DOM相关
    4.3.1 创建DOM节点
    相比较通过document.write来给页面生成内容，找一个容器元素（比如指定一个div或者span）并设置他们的innerHTML效率更高。
    而设置innerHTML的方式比通过createElement方法创建节点的效率更高。事实上，设置元素的innerHTML是创建节点效率最高的一种方式。
    如果必须使用createElement方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法。因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数。同样，如果需要创建很多元素，应该先准备一个样板节点。

    4.3.2 离线操作大型的DOM树
    在添加一个复杂的DOM树时，可以先构造，构造结束后再将其添加到DOM数的适当节点。这能够节省界面刷新的时间。

    同样，在准备编辑一个复杂的树时，可以先将树从DOM树上删除，等编辑结束后再添加回来。
 
    4.3.3 对象查询
    使用[""]查询要比.item()更快。调用.item()增加了一次查询和函数的调用。

    4.3.4 定时器
    如果针对的是不断运行的代码，不应该使用setTimeout，而应该用setInterval。setTimeout每次要重新设置一个定时器。

    4.4 其他
    1. 尽量减小文件尺寸。
    将JScript文件中无关的空行、空格、注释去掉，有助于减小JS文件的尺寸，提高下载的时间。（可以通过工具来支持代码发布）
    2. 尽量不要在同一个Page内同时引用JScript和VBScript引擎
    3. 将Page内的JScript移入到单独的JS文件中。
    4. 将Page内的JScript放置在Page的最下面，有助于提高页面的响应速度。
    5. 利用cache，减少JScript文件的下载次数
    6. 在HTML内书写JScript文件的URL时，注意统一大小写。这样可以利用前面URL缓存的文件。
    7. 推荐使用JScript Lint检查Javascript代码。毕竟，对JScript引擎来说，最容易理解的JScript代码，执行的效率也就最高。