Javascript代码优化

原文 https://developers.google.com/speed/articles/optimizing-javascript

客户端的javascript可以使你的app更加灵活与动态变化，但是浏览器解释代码时，可以引入低效率，而且各个浏览器的区别也很大。如下我们将讨论一些优化javascript代码的方法。

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?';

Working with strings

字符串的连结能够引起IE6和7垃圾回收的性能问题。尽管在IE8中，这个问题已经被解决了，甚至比其他浏览器更加高效，譬如chrome。但是有很多用户仍然在使用IE6，这个问题应该注意。

取代连结，采用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();

同样，通过条件或者循环方式以连结的方式建立string是非常低效的。错误的方式如下

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('');

Buildingstrings with portions coming from helper functions

以传stringbulder方式建立string，注意的是避免临时string的产生。例如，假设buildMenuItemHtml_ 能够把变量转化为string。不好的代码如：

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);}varmenuHtml = strBuilder.join();

Definingclass methods

如下code的效率很低，每当baz.Bar的实例a被构造，foo的函数以及闭包随之产生

baz.Bar = function() {  // constructor body  this.foo = function() {  // method body  };}

更好的方法为：

baz.Bar =function() {  //constructor body};baz.Bar.prototype.foo= function() {  //method body};

Initializinginstance variables

把变量的声明以及初始化放到实例的prototype里，以此避免当构造函数被调用时，变量每次都被初始化

foo.Bar = function() {  this.prop1_ = 4;  this.prop2_ = true;  this.prop3_ = [];  this.prop4_ = 'blah';};

采用如下的code

foo.Bar =function() {  this.prop3_= [];};foo.Bar.prototype.prop1_= 4;foo.Bar.prototype.prop2_= true;foo.Bar.prototype.prop4_= 'blah';

Avoidingpitfalls with closures

闭包的缺点如下：

·        They are the most common source of memory leaks.

·        Creating a closure is significantly slower then creating aninner function without a closure, and much slower than reusing a staticfunction. For example:

function setupAlertTimeout() {  varmsg = 'Message to alert';  window.setTimeout(function(){ alert(msg); }, 100);}

效率低于

function setupAlertTimeout() {  window.setTimeout(function(){    varmsg = 'Message to alert';    alert(msg);  },100);}

效率低于

function alertMsg() {  varmsg = 'Message to alert';  alert(msg);}functionsetupAlertTimeout() {  window.setTimeout(alertMsg,100);}

var a = 'a';functioncreateFunctionWithClosure() {  varb = 'b';  returnfunction () {    varc = 'c';    a;    b;    c;  };}varf = createFunctionWithClosure();f();

当f被调用了，a比b慢，他们都比c慢。

Avoiding with