转：高效javascript
传统上，网页中不会有大量的脚本，至少脚本很少会影响网页的性能。但随着网页越来越像 Web 应用程序，脚本的效率对网页性能影响越来越大。而且使用 Web 技术开发的应用程序现在越来越多，因此提高脚本的性能变得很重要。
对于桌面应用程序，通常使用编译器将源代码转换为二进制程序。编译器可以花费大量时间优化最终二进制程序的效率。Web 应用程序则不同。因为 Web 应用程序需要运行在不同的浏览器、平台和架构中，不可能事先完全编译。浏览器在获得脚本后要执行解释和编译工作。用户要求不仅要求网页能快速的载入，而且要求最终 Web 应用程序执行的效果要和桌面应用程序的一样流畅。Web 应用程序应能运行在多种设备上，从普通的桌面电脑到手机。
浏览器并不很擅长此项工作。虽然 Opera 有着当前最快的脚本引擎，但浏览器有不可避免的局限性，这时就需要 Web 开发者的帮助。Web 开发者提高 Web 应用程序的性能的方法很多而且也很简单，如只需要将一种循环变成另一种、将组合样式分解成三个或者只添加实际需要的脚本。
本文从 ECMAScript/javascript, DOM, 和页面载入方面分别介绍几种简单的能提高 Web 应用程序性能的方法。

原文地址：http://www.woiweb.net/efficient-javascript.html
目录

ECMAScript

避免使用 eval 或 Function 构造函数
重写 eval
如果你需要函数，那就用函数
避免使用 with
不要在影响性能的关键函数中使用 try-catch-finally
分隔 eval 和 with
避免使用全局变量
注意隐式对象转换
在关键函数中避免 for-in
优化 string 合并
基本运算符比函数调用更快
向 setTimeout() 和 setInterval()传送函数名，而不要传送字符串
DOM

重绘和 reflow
减少 reflow 次数
最小化 reflow 影响
修改 DOM 树
修改不可见元素
测量大小
一次修改多个样式值
用流畅性换取速度
避免搜索大量节点
使用 XPath 提高速度
避免在遍历 DOM 时修改 DOM
使用变量保存 DOM 值
页面载入

避免保存来自其他文档的引用
快速历史浏览
使用 XMLHttpRequest
动态创建 SCRIPT 元素
location.replace() 控制历史项
ECMAScript

避免使用 eval 或 Function 构造函数

每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢100倍以上。
eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
Function 构造函数比 eval 略好，因为使用此代码不会影响周围代码；但其速度仍很慢。
重写 eval
eval 不仅效率低下，而且绝大部分情况下完全没有使用的必要。很多情况下使用 eval 是因为信息以字符串形式提供，开发者误认为只有 eval 能使用此信息。下例是一个典型的错误：
function getProperty(oString) {
  var oReference;
  eval('oReference = test.prop.'+oString);
  return oReference;
}
下面的代码执行完全相同的函数，但没有使用 eval：
function getProperty(oString) {
  return test.prop[oString];
}
在 Opera 9, Firefox, 和 Internet Explorer 中后者比前者快95%，在 Safari 中快85%。(注意此比较中不含函数本身调用时间。)
如果你需要函数，那就用函数
下面是常见的 Function 构造函数使用：
function addMethod(oObject,oProperty,oFunctionCode) {
  oObject[oProperty] = new Function(oFunctionCode);
}
addMethod(myObject,'rotateBy90','this.angle=(this.angle+90)%360');
addMethod(myObject,'rotateBy60','this.angle=(this.angle+60)%360');
下面的代码没有使用 Function 构造函数，但提供了相同的功能：通过创建匿名函数：
function addMethod(oObject,oProperty,oFunction) {
  oObject[oProperty] = oFunction;
}
addMethod(myObject,'rotateBy90',function () { this.angle=(this.angle+90)%360; });
addMethod(myObject,'rotateBy60',function () { this.angle=(this.angle+60)%360; });
避免使用 with

尽管看起来挺方便，但 with 效率很低。with 结构又创建了一个作用域，以便使用变量时脚本引擎搜索。这本身只轻微的影响性能。但严重的是编译时不知道此作用域内容，因此编译器无法像对其他作用域（如函数产生的作用域）那样对之优化。
另一个高效而且也挺方便的方法是使用变量引用对象，然后使用变量访问对象属性。但只有属性不是 literal type 时才适用，如字符串或布尔值。
考虑下面的代码：
with( test.information.settings.files ) {
  primary = 'names';
  secondary = 'roles';
  tertiary = 'references';
}
下面的代码效率更高：
var testObject = test.information.settings.files;
testObject.primary = 'names';
testObject.secondary = 'roles';
testObject.tertiary = 'references';
不要在影响性能的关键函数中使用 try-catch-finally

try-catch-finally 结构比较特殊。和其他语法结构不同，它在 runtime 的当前作用域中创建新变量。每当 catch 执行时，就会将捕获到的 exception 对象赋给一个变量。这个变量不属于任何脚本。它在 catch 语句开始时被创建，在结束时被销毁。
由于此函数比较特殊，且是在运行时动态创建动态销毁，有些浏览器对其的处理并不高效。把 catch 语句放在关键循环中将极大影响性能。
如果可能，应在脚本中不频繁被调用的地方进行异常处理，或通过检查某种动作是否被支持来避免使用。下面的例子中，如果所需的属性不存在，将在循环语句中抛出许多异常：
var oProperties = ['first','second','third',...,'nth'], i;
for( i = 0; i < oProperties.length; i++ ) {
  try {
    test[oProperties[i]].someproperty = somevalue;
  } catch(e) {
    ...
  }
}
很多情况下，可把 try-catch-finally 结构移到循环外部。这样做稍微改变了程序语义，因为如果抛出异常，将停止整个循环：
var oProperties = ['first','second','t