Edited at

[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)