「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

jQueryとJavaScriptの実行速度比較

簡単なサンプルで動かす分にはあまり気にすることはないのですが、業務でWeb画面を作成する場合、コーディングが楽になるからと言ってjQueryを使用する場合には十分注意する必要があります。
サンプル画面で数行・数十行の一覧を表示する場合には全く気になりませんが、業務では性能テスト時に数百・数千行でのパフォーマンスを平気で計測する為、下手にjQueryを多様して作成してしまうと、処理速度が重くなってしまい対応に苦労する事になるからです。
私もJavaScriptもろくに知らないままいきなりjQueryを使い始めてしまっていたので大分苦労した経験があります。
以下にjQueryとJavaScriptで同じ処理を3万回繰り返し、その処理速度を計測した結果をまとめてみました。

IDセレクタ指定の実行速度

ソースChromeFireFoxIE10IE8
JavaScriptfor(var i =0; i < 30000; i++){
  var data = document.getElementById("btnTextBox").value;
}		4ms 15ms57ms185ms
jQueryfor(var i =0; i < 30000; i++){
  var data = $("#btnTextBox").val();
}		60ms284ms165ms600ms

ブラウザの種類でも速度は大分変わりますが、どのブラウザもjQueryでは最速と言われているIDセレクタ指定でさえ、JavaScriptの方が早くなるという結果になりました。一つのイベントで数回使う程度ならjQueryのIDセレクタ指定でも問題なさそうですが、ループ内で繰り返し使用する場合は極力JavaScriptで直接記述した方が処理速度は速くなります。

Ads by Google

「jQueryとJavaScriptの実行速度比較」に1件のコメント

  1. Try this. より:
    2015年3月17日 2:43 PM

    var $elm = $(“#btnTextBox”);

    for(var i =0; i < 30000; i++){
    var data = $elm[0].value;
    }

    返信

コメントを残す

メールアドレスが公開されることはありません。