B.B Enterprise BLOG

結論

速かったです。以下、詳細な内容が続きます。

背景

ネット上の記事で垣間見た内容で、「JSの要素取得をする際には、document.get系を使う方がいいよ。document.querySelector系より速いよ。」と目にしたまま検証せずの日々を過ごしており、本当にそうなのか身をもって確認してみることにしました。

検証環境

▽OS(弊社検証用 兼 作業用デスクトップPC)

Windows 10 Pro 64 ビット

▽ブラウザ

Chrome バージョン: 123.0.6312.106（Official Build） （64 ビット）

Microsoft Edge バージョン 123.0.2420.65 (公式ビルド) (64 ビット)

Firefox 124.0.2 (64 ビット)

検証の内容

1. 1度に特定の要素取得処理を10000回実行します。その実行直前と実行直後の時間差を計算した結果を1回分の処理時間としてカウントします。
2. 上記1のカウントを合計10回分行い、その平均値を計算します。
3. 上記2の計算結果を1つのメソッドの平均処理時間とします(この時点で小数点第四位を四捨五入)。

検証時に使用したコード

HTML

<!-- 特定のidがついた要素を取得時に使用 -->
<div id="targetElement"></div>

<!-- 特定のclassがついた要素を取得時に使用 -->
<div class="targetElement"></div>

JavaScript(Vanilla)

const startTime = performance.now();
const maxCount = 10000;
for (let i = 0; i < maxCount; i++) {
    // ここに対象メソッド1行分を設置
    // 対象メソッドは下記の内容とし、特定の1行のみを残しあとは削除し実行しました
    document.getElementById("targetElement");
    document.getElementsByClassName(".targetElement");
    document.querySelector(".targetElement");
    document.querySelector("#targetElement");
    document.querySelectorAll(".targetElement");
}
const endTime = performance.now();
console.log(endTime - startTime);

JavaScript(番外編jQuery)

$(function() {
    const startTime = performance.now();
    const maxCount = 10000;
    for (let i = 0; i < maxCount; i++) {
　　    // 対象メソッドは下記の内容とし、特定の1行のみを残しあとは削除し実行しました
        $("#targetElement");
        $(".targetElement");
    }
    const endTime = performance.now();
    console.log(endTime - startTime);
})

各メソッドの平均処理時間(ミリ秒)

document.getElementById()

Chrome	1.260
Edge	1.200
Firefox	0.618

document.getElementsByClassName()

Chrome	1.430
Edge	1.120
Firefox	0.640

document.querySelector()で特定idがついた要素を取得

Chrome	2.360
Edge	1.440
Firefox	2.448

document.querySelector()で特定classがついた要素を取得

Chrome	2.410
Edge	1.770
Firefox	2.238

ducoment.querySelectorAll()で特定classがついた要素を取得

Chrome	5.590
Edge	4.150
Firefox	6.816

[番外編1]jQueryで特定idがついた要素を取得

Chrome	9.730
Edge	11.700
Firefox	2.470

[番外編2]jQueryで特定classがついた要素を取得

Chrome	15.120
Edge	19.490
Firefox	7.216

まとめ

• この検証を経てdocument.getElementById()やdocument.getElementsByClassName()は、他メソッドに比べやはり処理速度は速かったことが再認識できたため、状況的に使用できる場面では率先して使用していこうと思いました。
• ただし、他の要素取得メソッドの使用タイミングについても0ではなく、様々な状況(各プロダクトの性質/チーム内ルールや政治的な面含む)の中、選択していくこともあり得るため、臨機応変に取捨選択をしていく思考は必要だと思いました。