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

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

```Markdown:動作環境
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つのやり方があります。
実際はそれほど実行速度は変わりません。

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

```JavaScript:文字列の結合
for (var i = 0; i < roopNum; i++) {
    html += '<div></div>';
}
```

[デモはこちら](https://yunbow.github.io/sample-javascript-performance/not_avaivale/array_join/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-performance/tree/master/not_avaivale/array_join/)

# Array.push()

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

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

```JavaScript:配列代入
for (var i = 0; i < roopNum; i++) {
    html[i] = '<div></div>';
}
```

[デモはこちら](https://yunbow.github.io/sample-javascript-performance/not_avaivale/array_push/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-performance/tree/master/not_avaivale/array_push/)

# Array.length

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

```JavaScript:Array.lengthキャッシュなし
for (var i = 0; i < array.length; i++) {
    array[i] = i;
}
```

```JavaScript:Array.lengthキャッシュあり
for (var i = 0, len = array.length; i < len; i++) {
    array[i] = i;
}
```

[デモはこちら](https://yunbow.github.io/sample-javascript-performance/not_avaivale/array_length/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-performance/tree/master/not_avaivale/array_length/)

# 関数呼び出し

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

```JavaScript:関数呼び出しあり
for (var i = 0; i < roopNum; i++) {
    sum += square(i);
}
```

```JavaScript:関数呼び出しなし
for (var i = 0; i < roopNum; i++) {
    sum += i * i;
}
```

[デモはこちら](https://yunbow.github.io/sample-javascript-performance/not_avaivale/function_call/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-performance/tree/master/not_avaivale/function_call/)

# new

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

```JavaScript:newあり
for (var i = 0; i < roopNum; i++) {
    var a = new Object();
}
```

```JavaScript:newなし
for (var i = 0; i < roopNum; i++) {
    var a = {};
}
```

[デモはこちら](https://yunbow.github.io/sample-javascript-performance/not_avaivale/new/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-performance/tree/master/not_avaivale/new/)

# try-catch

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

```JavaScript:try-catchあり
for (var i = 0; i < roopNum; i++) {
    try {
        a++;
    } catch (e) { }
}
```

```JavaScript:try-catchなし
for (var i = 0; i < roopNum; i++) {
    a++;
}
```

[デモはこちら](https://yunbow.github.io/sample-javascript-performance/not_avaivale/try_catch/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-performance/tree/master/not_avaivale/try_catch/)

以上です。

# 関連記事

[[JavaScript] パフォーマンス改善（その1）](https://qiita.com/yun_bow/items/289450b8e1bd396dce4a)
[[JavaScript] パフォーマンス改善（その2）](https://qiita.com/yun_bow/items/084ad827038356c76725)