提高javascript的几种方法.docVIP

提高javascript的几种方法 本文从 ECMAScript/javascript, DOM, 和页面载入方面分别介绍几种简单的能提高 Web 应用程序性能的方法 一、避免使用 eval 或 Function 构造函数 每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢100倍以上。 eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。 Function 构造函数比 eval 略好，因为使用此代码不会影响周围代码；但其速度仍很慢。 重写 eval eval 不仅效率低下，而且绝大部分情况下完全没有使用的必要。很多情况下使用 eval 是因为信息以字符串形式提供，开发者误认为只有 eval 能使用此信息。下例是一个典型的错误： 1 function getProperty(oString) { 2 ??var oReference; 3 ??eval(oReference = p.+oString); 4 ??return oReference; 5 } 下面的代码执行完全相同的函数，但没有使用 eval： 1 function getProperty(oString) { 2 ??return p[oString]; 3 } 在 Opera 9, Firefox, 和 Internet Explorer 中后者比前者快95%，在 Safari 中快85%。(注意此比较中不含函数本身调用时间。) 如果你需要函数，那就用函数 下面是常见的 Function 构造函数使用： 1 function addMethod(oObject,oProperty,oFunctionCode) { 2 ??oObject[oProperty] = new Function(oFunctionCode); 3 } 4 addMethod(myObject,rotateBy90,this.angle=(this.angle+90)%360); 5 addMethod(myObject,rotateBy60,this.angle=(this.angle+60)%360); 下面的代码没有使用 Function 构造函数，但提供了相同的功能：通过创建匿名函数： 1 function addMethod(oObject,oProperty,oFunction) { 2 ??oObject[oProperty] = oFunction; 3 } 4 addMethod(myObject,rotateBy90,function () { this.angle=(this.angle+90)%360; }); 5 addMethod(myObject,rotateBy60,function () { this.angle=(this.angle+60)%360; }); 四、避免使用 with 尽管看起来挺方便，但 with 效率很低。with 结构又创建了一个作用域，以便使用变量时脚本引擎搜索。这本身只轻微的影响性能。但严重的是编译时不知道此作用域内容，因此编译器无法像对其他作用域（如函数产生的作用域）那样对之优化。 另一个高效而且也挺方便的方法是使用变量引用对象，然后使用变量访问对象属性。但只有属性不是 literal type 时才适用，如字符串或布尔值。 考虑下面的代码： 1 with( rmation.settings.files ) { 2 ??primary = names; 3 ??secondary = roles; 4 ??tertiary = references; 5 } 下面的代码效率更高： 1 var testObject = rmation.settings.files; 2 testObject.primary = names; 3 testObject.secondary = roles; 4 testObject.tertiary = references; 五、不要在影响性能的关键函数中使用 try-catch-finally try-catch-finally 结构比较特殊。和其他语法结构不同，它在 runtime 的当前作用域中创建新变量。每当 catch 执行时，就会将捕获到的 exception 对象赋给一个变量。这个变量不属于任何脚本。它在 catch 语句开始时被创建