More than 5 years have passed since last update.

[JavaScript] パフォーマンス改善（その2）

Last updated at 2018-12-24Posted at 2018-12-23

JavaScriptのパフォーマンス改善は効果があるのか、ブラウザ毎に計測してみました。（2018年12月現在）
今回は、他のWEBサイトに載っている全く効果のない改善パターンについて紹介します。

動作環境

OS: Windows 10 Pro
Google Chrome: 70.0.3538.110
Mozilla Firefox: 63.0.3
Microsoft Edge: 42.17134.1.0
Microsoft Internet Explorer: 11.407.17134.0

Array.join()

Array.join()と文字列の結合の2つのやり方があります。
実際はそれほど実行速度は変わりません。

Array.join()

for (var i = 0; i < roopNum; i++) {
    htmlArray.push('<div></div>');
}
html = htmlArray.join('');

文字列の結合

for (var i = 0; i < roopNum; i++) {
    html += '<div></div>';
}

Array.push()と配列の代入の2つのやり方があります。
実際はそれほど実行速度は変わりません。

Array.push()

for (var i = 0; i < roopNum; i++) {
    html.push('<div></div>');
}

配列代入

for (var i = 0; i < roopNum; i++) {
    html[i] = '<div></div>';
}

Array.length を変数にキャッシュする・しないやり方があります。
実際はそれほど実行速度は変わりません。
キャッシュするやり方は、ソースコードの可読性が落ちるので
素直にキャッシュしないやり方の方が良いと思います。

Array.lengthキャッシュなし

for (var i = 0; i < array.length; i++) {
    array[i] = i;
}

Array.lengthキャッシュあり

for (var i = 0, len = array.length; i < len; i++) {
    array[i] = i;
}

関数呼び出しする・しないやり方があります。
実際はそれほど実行速度は変わりません。
ソースコードの可読性が上がる書き方をすればよいと思います。

関数呼び出しあり

for (var i = 0; i < roopNum; i++) {
    sum += square(i);
}

関数呼び出しなし

for (var i = 0; i < roopNum; i++) {
    sum += i * i;
}

newを使用する・しないやり方があります。
実際はそれほど実行速度は変わりません。
ソースコードの可読性が上がる書き方をすればよいと思います。

newあり

for (var i = 0; i < roopNum; i++) {
    var a = new Object();
}

newなし

for (var i = 0; i < roopNum; i++) {
    var a = {};
}

try-catchを使用する・しないやり方があります。
実際はそれほど実行速度は変わりません。
ソースコードの可読性が上がる書き方をすればよいと思います。

try-catchあり

for (var i = 0; i < roopNum; i++) {
    try {
        a++;
    } catch (e) { }
}

try-catchなし

for (var i = 0; i < roopNum; i++) {
    a++;
}

以上です。