web-dev-qa-db-ja.com

jquery、パフォーマンスの面でより速いgetElementByIdまたはjqueryセレクターとは何ですか？

パフォーマンスに関してdocument.getElementById('elementId')または$('#elementId')のほうが良い点は何ですか？自分で速度を計算するにはどうすればよいですか？

javascriptjqueryjquery-selectors
45
Ahmed Magdy

パフォーマンスが気になる場合は、ネイティブのgetElementByIdの方がはるかに高速ですが、jQueryを使用すると、多くのものに非常に便利にアクセスできます。だから、あなたは次のようなものを使いたいかもしれません：

$( document.getElementById("some_id") ).jQueryCall();

これにより、パフォーマンスが向上すると同時に、jQueryを使用できるようになります。

82
jeffreyveon

getElementByIdはネイティブコードを使用するため、より高速です。 jQueryセレクターもgetElementByIdを使用しますが、最初にテキストに対して多くのテストと比較を行う必要があります。

30
Marius

Jqueryとdomの間のあらゆる種類のパフォーマンスをテストしたいが、jqueryはdomに基づいているため、通常はすべての処理が遅い場合は、 http://jsperf.com/ を使用します。

7
Marcio

同じ質問を思いながら、この投稿を偶然見つけました...簡単なテストスクリプトを実行することにしました...実行して、自分で試して、私の心を吹き飛ばしました！

_var now = Date.now();
var diff = 0;
console.log(now);

for(var i=0; i < 1000000; i++)
{
   if($(document.getElementById("test")).css('opacity') == '0.2')
       $(document.getElementById("test")).css('opacity', '1');
   else
      $(document.getElementById("test")).css('opacity', '0.2');
}

diff = Date.now() - now;
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds');

////////////////////////////////////////////////////////////////////////

var now2 = Date.now();
var diff2 = 0;
console.log(now2);

for(i=0; i < 1000000; i++)
{
   if($("#test").css('opacity') == '0.2')
       $("#test").css('opacity', '1');
   else
      $("#test").css('opacity', '0.2');
}

diff2 = Date.now() - now2;

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds');

////////////////////////////////////////////////////////////////////////

var now3 = Date.now();
var diff3 = 0;
var elem = $("#test");
console.log(now3);

for(i=0; i < 1000000; i++)
{
   if(elem.css('opacity') == '0.2')
       $(elem).css('opacity', '1');
   else
      $(elem).css('opacity', '0.2');
}

diff3 = Date.now() - now3;

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds');
_

このスクリプトを実行した後、次の結果が得られました。

実行1

$(document.getElementById("test")).somejQueryCall()の場合：552ミリ秒

$("#test").somejQueryCall()の場合：881ミリ秒

$(elem).somejQueryCall()の場合：1317ミリ秒

実行2

$(document.getElementById("test")).somejQueryCall()の場合：520ミリ秒

$("#test").somejQueryCall()の場合：855ミリ秒

$(elem).somejQueryCall()の場合：1289ミリ秒

実行

$(document.getElementById("test")).somejQueryCall()の場合：565ミリ秒

$("#test").somejQueryCall()の場合：936ミリ秒

$(elem).somejQueryCall()の場合：1445ミリ秒

違いが信じられません!!!これを共有しなければなりませんでした！

平和！

5
An0nC0d3r

ネイティブのgetElementByIdの方が高速です。 jqueryセレクターエンジンは、＃xセレクターに対してこれをラップするだけです。

Firebugコンソールを使用すると、次の方法でjqueryをプロファイリングできます。 getElementByIdのようなネイティブAPI呼び出しでうまく機能するかわかりません。

console.profile();
$('#eleId');
console.profileEnd();
3
redsquare

もちろんgetElementByIdの方が高速ですが、jQueryを使用すると多くのことができます。

これをテストするために、それぞれ10k回ループして、前後のタイムスタンプを比較することができます。

3
YOU

へえ。この質問を調査したところ、この素晴らしい投稿が見つかりました。また、速度に関する最適化の具体的なヒントを含む、JQueryの学習サイトの最新情報を含む、これに関する投稿！

最新のDOM仕様では、一般的にパフォーマンスについて心配する必要がないことに注意してください。ボトルネックを作成（または発見）した場合のみ。

セレクターの最適化

1
Richard Cooke

このページにリンクされている他のパフォーマンステストは壊れているようで、この質問で質問されなかったもの（つまり、カスタムjQueryメソッド）も含まれていたため、新しいパフォーマンスベンチマークを作成して、カスタムメソッドの代わりに、jQueryで完全に同等の（DOM要素を返す）を含む質問：

https://jsperf.com/jquery-get-0-vs-get-element-by-id

Chromeで実行すると、ストレートjQuery

$('#foo').get(0)

標準JavaScriptの同等の操作より92％遅い

document.getElementById('foo')

私はまた、ここで受け入れられた回答として現在マークされているものを試してみました。これは「はるかに速い」と思われますが、標準のJavaScript同等のものよりも89％遅いです。

$( document.getElementById("foo") ).get(0);

私が作成した パフォーマンスベンチマーク を使用して、自由に自分で実行し、ブラウザで何が得られるかを確認してください。 jQueryのないバージョンは、はるかに高速であるようです。

0
Uniphonic