客户端脚本能够使得应用更加具有吸引力，但是浏览器对脚本代码的解释执行可能也会导致效率低下。
这里我们探讨几个优化JavaScript代码的最佳实践建议。
1、处理字符串
字符串拼接在IE 6、7下的垃圾回收性能很差。虽然IE 8已经解决了这个问题。如果你的用户中有相当一部分人使用IE 6、7，那么你得谨慎构建你的字符串了。
比如这个例子：
var veryLongMessage ='This is a long string that due to our strict line length limit of' +maxCharsPerLine +' characters per line must be wrapped. ' +percentWhoDislike +'% of engineers dislike this rule. The line length limit is for ' +' style purposes, but we don't want it to have a performance impact.' +' So the question is how should we do the wrapping?';
不要直接使用字符串拼接 + ，更好的做法是用join：
var veryLongMessage =['This is a long string that due to our strict line length limit of',maxCharsPerLine,' characters per line must be wrapped. ',percentWhoDislike,'% of engineers dislike this rule. The line length limit is for ',' style purposes, but we don't want it to have a performance impact.',' So the question is how should we do the wrapping?'].join();
类似的，在条件分支语句或循环语句中使用字符串拼接也很低效。不好的做法：
var fibonacciStr = 'First 20 Fibonacci Numbers';for (var i = 0; i < 20; i++) {fibonacciStr += i + ' = ' + fibonacci(i) + '';}
正确的做法：
var strBuilder = ['First 20 fibonacci numbers:'];for (var i = 0; i < 20; i++) { strBuilder.push(i, ' = ', fibonacci(i));}var fibonacciStr = strBuilder.join('');
2、使用helper functions构建字符串片段
通过将string builder传入helper function来避免临时存储消耗。
例如不该用下面这种：
var strBuilder = [];for (var i = 0, length = menuItems.length; i < length; i++) { strBuilder.push(this.buildMenuItemHtml_(menuItems[i]));}var menuHtml = strBuilder.join();
而应该使用：
var strBuilder = [];for (var i = 0, length = menuItems.length; i < length; i++) { this.buildMenuItem_(menuItems[i], strBuilder);}var menuHtml = strBuilder.join();
3、定义类方法
下面的代码是低效的，因为每次有一个baz.Bar实例被创建，一个新的函数和闭包就为foo创建：
baz.Bar = function() { // constructor body this.foo = function() { // method body };}
更优的做法是：
baz.Bar = function() { // constructor body};baz.Bar.prototype.foo = function() { // method body};
通过这种方法，不管有多少个baz.Bar实例被创建，只有一个function被创建，并且也不形成闭包。
4、初始化实例变量
将实例变量的声明/初始化放到prototype中，如果实例变量带有一个值类型的初始值（即number、Boolean、null、undefined或字符串类型值）。这避免了每次构造器创建时都运行毫无意义的初始化代码。
不好的做法：
foo.Bar = function() { this.prop1_ = 4; this.prop2_ = true; this.prop3_ = []; this.prop4_ = 'blah';};
更优的做法：
foo.Bar = function() { this.prop3_ = [];};foo.Bar.prototype.prop1_ = 4;foo.Bar.prototype.prop2_ = true;foo.Bar.prototype.prop4_ = 'blah';
5、避免闭包中的陷阱
闭包是一个强大有用的东西。但是他们有一些缺点，包括：
1、他们是内存泄露的最主要元凶2、创建一个闭包比创建一个内联函数慢，比重用一个静态函数更慢。比如：
function setupAlertTimeout() { var msg = 'Message to alert'; window.setTimeout(function() { alert(msg); }, 100);}
比下面的代码更慢：
function setupAlertTimeout() { window.setTimeout(function() { var msg = 'Message to alert'; alert(msg); }, 100);}
上面的代码又比下面的代码更慢：
function alertMsg() { var msg = 'Message to alert'; alert(msg);}function setupAlertTimeout() { window.setTimeout(alertMsg, 100);}
闭包增加了一层作用域链。当浏览器解析属性时，每一层的作用域链都必须被检查。在下面的例子：
var a = 'a';function createFunctionWithClosure() { var b = 'b'; return function () { var c = 'c'; a; b; c; };}var f = createFunctionWithClosure();f();
当f被调用时，引用a比引用b更慢，引用b又比引用c更慢。
查看IE+JScript Performance Recommendations Part 3: JavaScript Code inefficiencies 来获取更多在IE下正确使用闭包的信息
6、避免with
避免在代码中使用with语句。它对性能产生负面影响，因为它改变了作用域链，使得在其它作用域中查找变量的代价更加昂贵。
7、避免浏览器内存泄露
内存泄露是web应用中的常见问题，会导致巨大的性能问题。当浏览器消耗的内存增加，你的其他Web应用以及用户系统的其他程序都会变得很慢。最常见的内存泄露场景是JavaScript引擎和浏览器的DOM对象的循环依赖，比如下面这个例子：
<script language='javascript'> var menu = document.getElementById('myMenu'); AttachEvent(menu); function AttachEvent(element) { element.attachEvent( "onmouseover", mouseHandler); function mouseHandler(){ /* whatever */ } }</script>
又比如下面的代码：
var myGlobalObject;function SetupLeak(){ //Here a reference created from the JS World //to the DOM world. myGlobalObject=document.getElementById("LeakedDiv"); //Here DOM refers back to JS World; //hence a circular reference. //The memory will leak if not handled properly. document.getElementById("LeakedDiv").expandoProperty = myGlobalObject;}
联系客服
