Javascript:String concatenation

用YUI Profiler做一个字符串连接效率的测试

测试目的:

发现不同的文章描述javascript字符串连接的方式均不同,预借此次测试得出最优的写字符串连接的方案。

测试方式:

分为四种情况:
One: 变量 += 变量1 + 变量2 + 变量3;
Two: 变量 += 变量1,变量 += 变量2,变量 += 变量3;
Three:
变量 += 字符串1 + 字符串2 + 字符串3;
Four:
变量 += 字符串1 ,变量 += 字符串2,变量 += 字符串3;

用Profiler分别获取四个不同情况下,对应函数10次运行所花时间的平均值。

测试结论:

Fiefox 3.6、Safari 4、Opera 10:One>Two Four>Three the average amount of time (in milliseconds)

IE8、Chrome 5:Two>One Four>Three the average amount of time (in milliseconds)

当某变量等于若干字符串相加时,推荐使用 :

变量 += 字符串1 + 字符串2 + 字符串3;

当某变量等于若干变量相加时,Fiefox 3.6、Safari 4、Opera 10推荐使用:

变量 += 变量1;
变量 += 变量2;
变量 += 变量3;

IE8、Chrome 5推荐使用:

变量 += 变量1 + 变量2 + 变量3;

测试代码:

function testStrConcatOne(num) {
  var u;
  var s = 's';
  var f = 'f';
  var c = 'c';
  
  for (var i=0; i < 100000; i++){
  u+=s+f+c;
  }
  }

function testStrConcatTwo(num) {
  var u;
  var s = 's';
  var f = 'f';
  var c = 'c';
  
  for (var i=0; i < 100000; i++){
  u += s;
  u += f;
  u += c;
  }
  }

function testStrConcatThree(num) {
  var u;
  for (var i=0; i < 100000; i++){
  u += 's' + 'f' + 'c';
  }
  }

function testStrConcatFour(num) {
  var u;
  for (var i=0; i < 100000; i++){
  u += 's';
  u += 'f';
  u += 'c';
  }
  }

var Y = YUI().use("profiler", function(Y){
  
  Y.Profiler.registerFunction("testStrConcatOne", window);
  Y.Profiler.registerFunction("testStrConcatTwo", window);
  Y.Profiler.registerFunction("testStrConcatThree", window);
  Y.Profiler.registerFunction("testStrConcatFour", window);
  
  for(var i=0;i<10;i++) {
  testStrConcatOne();
  }
  
  for(var i=0;i<10;i++) {
  testStrConcatTwo();
  }
  
  for(var i=0;i<10;i++) {
  testStrConcatThree();
  }
  
  for(var i=0;i<10;i++) {
  testStrConcatFour();
  }
  
  var avgOne = Y.Profiler.getAverage("testStrConcatOne");
  var callsOne = Y.Profiler.getCallCount("testStrConcatOne");
  var avgTwo = Y.Profiler.getAverage("testStrConcatTwo");
  var callsTwo = Y.Profiler.getCallCount("testStrConcatTwo");
  var avgThree = Y.Profiler.getAverage("testStrConcatThree");
  var callsThree = Y.Profiler.getCallCount("testStrConcatThree");
  var avgFour = Y.Profiler.getAverage("testStrConcatFour");
  var callsFour = Y.Profiler.getCallCount("testStrConcatFour");
  
  Y.Profiler.unregisterFunction("testStrConcatOne");
  Y.Profiler.unregisterFunction("testStrConcatTwo");
  Y.Profiler.unregisterFunction("testStrConcatThree");
  Y.Profiler.unregisterFunction("testStrConcatFour");

  alert(avgOne+' | '+callsOne+'\n'+avgTwo+' | '+callsTwo+'\n'+avgThree+' | '+callsThree+'\n'+avgFour+' | '+callsFour);
  });

最后引用Opera官方 Efficient JavaScript 一文中的节选

Use strings accumulator-style

String concatenation can be an expensive process. Using the + operator does not wait for the result to be assigned to a variable. Instead, it creates a new string in memory, assigns its result to that string, and it is that new string that may be assigned to a variable. The following code shows a common assignment of a concatenated string:

a += 'x' + 'y';

That code would be evaluated by firstly creating a temporary string in memory, assigning the concatenated value of ‘xy’, then concatenating that with the current value of a, and finally assigning the resulting value of that to a. The following code uses two separate commands, but because it assigns directly to a each time, the temporary string is not used. The resulting code is around 20% faster in many current browsers, and potentially requires less memory, as it does not need to temporarily store the concatenated string:

a += 'x';
a += 'y';
This entry was posted in Javascript/Ajax and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Web Hosting