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

JavaScriptのパフォーマンス改善は効果があるのか、ブラウザ毎に計測してみました。（2018年12月現在）

動作環境

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

JavaScriptライブラリ

jQuery: 3.1.1

jQueryのappend

アンチパターンは、繰り返し処理の中で、appendを毎回呼び出します。

index.js

for (var i = 0; i < roopNum; i++) {
    tempSelector.append('<li>' + i + '</li>');
}

改善パターンは、繰り返し処理の外でappendを1回だけ呼び出します。

index.js

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

デモはこちら
ソースファイルはこちら

計測結果は下記の通りです。
appendを1回だけ呼び出した場合と毎回呼び出した場合では
結果が大きくことなりました。
appendの呼び出し回数は少なくした方がよさそうです。

ブラウザ名	10回	100回	1000回
Google Chrome（Anti）	0	7	78
Google Chrome	1	4	28
Mozilla Firefox（Anti）	0	11	165
Mozilla Firefox	1	1	30
Microsoft Edge（Anti）	4	70	238
Microsoft Edge	2	15	56
Microsoft Internet Explorer（Anti）	5	41	344
Microsoft Internet Explorer	4	18	186

jQueryのIDセレクター

アンチパターンはjQueryのセレクターでクラス名を指定します。

index.js

for (var i = 0; i < roopNum; i++) {
    $('.tempClassName').append('<li>' + i + '</li>');
}

改善パターンは、jQueryのセレクターでIDを指定します。

index.js

for (var i = 0; i < roopNum; i++) {
    $('#tempListsId').append('<li>' + i + '</li>');
}

デモはこちら
ソースファイルはこちら

計測結果は下記の通りです。
jQueryのセレクターをIDで参照する方が速いです。

ブラウザ名	10回	100回	1000回
Google Chrome（Anti）	1	10	94
Google Chrome	1	6	63
Mozilla Firefox（Anti）	4	7	94
Mozilla Firefox	3	15	27
Microsoft Edge（Anti）	5	39	200
Microsoft Edge	9	22	152
Microsoft Internet Explorer（Anti）	5	54	373
Microsoft Internet Explorer	3	38	333

jQueryのfind

アンチパターンはjQueryのfindを使用せずにクラス名のセレクターを指定します。

index.js

for (var i = 0; i < roopNum; i++) {
    $('.tempClassName').append('<li>' + i + '</li>');
}

改善パターンは、jQueryのfindを使用してクラス名のセレクターを指定します。

index.js

for (var i = 0; i < roopNum; i++) {
    $('#tempContentsId').find('.tempClassName').append('<li>' + i + '</li>');
}

デモはこちら
ソースファイルはこちら

計測結果は下記の通りです。
jQueryのセレクターでIDと同様に
IDのセレクターからfindを使用して参照する方が速いです。

ブラウザ名	10回	100回	1000回
Google Chrome（Anti）	1	7	96
Google Chrome	1	7	82
Mozilla Firefox（Anti）	3	17	81
Mozilla Firefox	2	26	35
Microsoft Edge（Anti）	6	54	201
Microsoft Edge	10	32	188
Microsoft Internet Explorer（Anti）	15	53	379
Microsoft Internet Explorer	7	34	495

jQueryのメソッドチェーン

アンチパターンは、メソッドチェーン使わずにappendを呼び出します。

index.js

for (var i = 0; i < roopNum; i++) {
    tempSelector.append('<li>' + i + '</li>');
    // ～ 省略 ～
    tempSelector.append('<li>' + i + '</li>');
}

改善パターンは、メソッドチェーン使ってappendを呼び出します。

index.js

for (var i = 0; i < roopNum; i++) {
    tempSelector.append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>').append('<li>' + i + '</li>');
}

デモはこちら
ソースファイルはこちら

計測結果は下記の通りです。
それほど大きな差はありません。

ブラウザ名	10回	100回	1000回
Google Chrome（Anti）	7	69	448
Google Chrome	5	49	503
Mozilla Firefox（Anti）	11	120	654
Mozilla Firefox	26	74	394
Microsoft Edge（Anti）	29	159	1792
Microsoft Edge	20	154	1810
Microsoft Internet Explorer（Anti）	51	410	4041
Microsoft Internet Explorer	56	501	3775

jQueryのセレクターキャッシュ

アンチパターンは、jQueryのセレクターを変数にキャッシュせずに、毎回セレクターを生成します。

index.js

for (var i = 0; i < roopNum; i++) {
    $('#tempListsId').append('<li>' + i + '</li>');
}

改善パターンは、jQueryのセレクターを変数にキャッシュします。

index.js

for (var i = 0; i < roopNum; i++) {
    tempSelector.append('<li>' + i + '</li>');
}

デモはこちら
ソースファイルはこちら

計測結果は下記の通りです。
それほど大きな差はありません。

ブラウザ名	10回	100回	1000回
Google Chrome（Anti）	1	8	77
Google Chrome	4	11	44
Mozilla Firefox（Anti）	16	68	222
Mozilla Firefox	29	27	204
Microsoft Edge（Anti）	9	48	174
Microsoft Edge	9	24	138
Microsoft Internet Explorer（Anti）	10	40	346
Microsoft Internet Explorer	5	36	323

以上です。

関連記事

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