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对象的循环依赖,比如下面这个例子:
又比如下面的代码:
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;
}
更多信息可以参考:http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
来源:http://www.cnblogs.com/feichexia/archive/2012/12/31/2840806.html