Javascriptでの文字列接続のパフォーマンスについて

1文字列の接続方法まず、文字列接続の2つの一般的な方法を振り返ってみましょう.1.1文字列接続演算子を使用する言語(Java、C#、PHPなど)には文字列接続演算子があり、Javascriptも例外ではありません.コード例:

 
  
var str = ""; 
  
str = str + "a"; 
  
 
 

1.2配列の使用
一般的な言語では、文字列接続演算のパフォーマンスは一般的に高くありません.そのため、C#では文字列接続のためにStringBuilder(JavaではStringBuffer)が用意されています.JavascriptではArrayによるStringBuilderのシミュレーションが行われる.

 
  
var str = []; 
  
for (var i = 0; i < 100; i++) { 
  
　　str[i] = "12345"; 
  
} 
  
str = str.join(""); 
  
 
 

2テスト
文字列をコピーするプロセスを使用して、2つの方法のパフォーマンスをテストします.
2.1文字列接続演算子によるコピー:

 
  
function copyByOperator(str, times) { 
  
　　var newStr = ""; 
  
　　for (var i = 0; i < times; i++) { 
  
　　　　newStr += str; 
  
　　} 
  
　　return newStr; 
  
} 
  
 
 

2.2配列によるレプリケーション:

 
  
function copyByArray(str, times) { 
  
　　var newStr = []; 
  
　　for (var i = 0; i < times; i++) { 
  
　　　　newStr[i] = str; 
  
　　} 
  
　　return newStr.join(""); 
  
} 
  
 
 

strは固定されたHTML文字列を採用し、長さは61である.
2.3 IEでのテスト
IEの性能が比較的に悪いことを考慮して、先に小さいtimes値(6000)でIE 6、IE 7とIE 8の下でテストします.10回実行した後、平均値を取ります.結果は以下の通りです.
IEブラウザでのテスト結果
ブラウザ
copyByOperator
copyByArray
IE 6
1780.4ms
9.5ms
IE 7
1754.6ms
7.7ms
IE 8
1.6ms
9.4ms
IE 6,7はIE 8のテスト結果から遠く離れており、明らかにIE 8は文字列接続演算を最適化し、効率は配列複製法よりも高い.
2.4各種ブラウザでのテスト
次に、最新バージョンの各種ブラウザを比較的大きなtimes値(50000)でテストします.
各種ブラウザのテスト結果
ブラウザ
copyByOperator
copyByArray
IE 8
21.8ms
54.7ms
Firefox 3.6
40.9ms
27.9ms
Chrome 4
4.4ms
10.9ms
Safari 4.0.5
41.6ms
34.6ms
Opera 10.50
33.1ms
23ms
この結果は本当に予想外だった.IE 8の文字列接続演算がChrome以外のブラウザを打ち負かすなんて、IEの性能が低いと言われている人は要注意です.Chromeでは,配列複写法よりも文字列接続演算が効率的な場合もあった.
3まとめ
ブラウザのパフォーマンスは向上しつつあり、フロントエンドエンジニアとしてJavascriptプログラムの最適化ポリシーを適時に調整し、最適なパフォーマンスを得る必要があります.