プログラミング/javascript/文字列の連結 の履歴(No.1)

文字列の連結に join を使うのは時代遅れ†

昔はたくさんの文字列を連結して長い文字列を使う場合に + を使うと遅くなるから、 一旦配列にしておいて join で繋ぐような最適化をすることが推奨される場合がありました。

でも、それは遠い昔のことで、ずいぶん前から都市伝説とされていたそうですね。 恥ずかしながら知りませんでした。

• JavaScript文字列処理は"+="が十分高速、Safariもベター http://news.mynavi.jp/news/2008/05/12/045/

悔しいので一応自分でも確かめてみました。

現在の javascript ではそんな配慮は無駄なばかりか悪影響があるらしいです†

LANG:javascript
var count = 100000;
var text = '1234567890'; 
 
var i, s, a; 
 
s = ''; 
console.time('append'); 
for(i=0; i<count; i++) 
  s += text; 
console.timeEnd('append'); 
 
s = ''; 
console.time('append2'); 
for(i=0; i<count; i++) 
  s = s + text; 
console.timeEnd('append2'); 
 
s = ''; 
console.time('unshift'); 
for(i=0; i<count; i++) 
  s = text + s; 
console.timeEnd('unshift'); 
 
a = []; 
console.time('join'); 
for(i=0; i<count; i++) 
  a << text; 
s = a.join(''); 
console.timeEnd('join'); 

http://jsbin.com/pigahijabo/2/edit?js,output

chrome での結果は以下の通り。

LANG:console
append: 138.354ms
append2: 132.475ms
unshift: 128.072ms
join: 184.078ms

Firefox での結果は以下の通り。

LANG:console
append: 9.38ms
append2: 8.64ms
unshift: 57.58ms
join: 42.02ms

IE での結果は以下の通り。

LANG:console
append: 317.353ms
append2: 293.3ms
unshift: 277.514ms
join: 378.877ms

いずれも join が一番遅く、何も考えずに + で連結していくのが一番だということが分かりました。