3

私は、JavaScriptスニペットをCMSに入力して、顧客向けのサイトで実行できる会社で、サードパーティのJavaScript作業を少し行っています。サイトのヘッダーでスイッチをオンにするオプションがあります。JQuery 1.7.1通常、スイッチをオンにしない場合は、コードがどれだけ複雑になるかに応じて、オンにするかどうかを選択します。

すべての場合にオンにしただけで、次のような単純なものでも、どの程度の違いが生じるのかとよく考えていました。

document.getElementById('myElement');

なりました

$('#myElement');

JQueryをオンにする方が良い/効率的/簡単であると判断する際の「ブレークポイント」はどこにありますか？

これを考えさせられた今日の例は次のとおりです（通常のjavascriptとそれに相当するJQueryの両方）：

Javascript：

if (document.getElementById('myElement')!== null) {
    var oldText = document.getElementById('myElement').innerHTML,
    newText = oldText.replace(/one/i,'two');
    document.getElementById('myElement').innerHTML = newText;
}

jQuery：

if ($('#myElement').length !== 0) {
    var oldText = $('#myElement').html(),
    newText = oldText.replace('one','two');
    $('#myElement').html(newText);
}

そして、クライアントにjQueryをダウンロードさせることへの悪影響はどのくらいですか？

4

2 に答える 2

7

違いは最小限で、これらの 10 文字を書く価値はありません...

いつものように、開発者としての時間は通常、最も貴重なリソースであることを忘れないでください。パフォーマンスを改善する必要があることが明らかでない限り、セレクター速度の最適化に集中しないでください。

jQuery サイト

そしてもちろんjQuery、id セレクターよりも多くの機能を備えています...

クエリされた要素をキャッシュし、複数回クエリしないことをお勧めしますがjQuery、バニラ JavaScript を使用する場合と使用する場合の両方に当てはまります。

から：

document.getElementBy('id').value = "foo";
document.getElementBy('id').parentNode.className = "parent";

に：

var element = document.getElementBy('id')
element.value = "foo";
element.parentNode.className = "parent"

または jQuery バージョン:

var $element = $('#id');
$element.val("foo");
$element.parent().addClass("parent");

jQuery の "chainabilty" - カスケード スタイルのため、1 つの "chain" でそれを行います。

$('#id').val("foo").parent().addClass("parent");

これjsperfは、が 1 秒あたり 1,000,000 回しか操作できないことを意味するよりも 3 ～ $('#id')6 遅いことを示しています...document.getElementById

「わずかな効率については忘れるべきです。たとえば、約 97% の確率で: 時期尚早の最適化は諸悪の根源です。」

jQueryライブラリの「読み込み」・ダウンロード時間について。

  • 現在の縮小バージョンの jQuery (1.7.2) のサイズはわずか 32K で、これは Web サイトのほとんどの画像よりも小さいことはほぼ間違いないため、無視できます。
  • jQuery の Google グローバル キャッシュ コピーを使用できます。詳細については、この長いブログ投稿を参照してください。

サイトがどれほど最適化されていても、jQuery をローカルでホストしている場合、ユーザーは少なくとも 1 回は jQuery をダウンロードする必要があります。各ユーザーはおそらく、ブラウザーのキャッシュに多数の同一の jQuery のコピーを既に持っていますが、それらの jQuery のコピーは、サイトにアクセスしたときに無視されます。

ただし、ブラウザは、CDN でホストされている jQuery のコピーへの参照を確認すると、それらの参照がすべてまったく同じファイルを参照していることを認識します。これらすべての CDN 参照がまったく同じ URL を指しているため、ブラウザーはそれらのファイルが完全に同一であると信頼でき、既にキャッシュされているファイルの再要求に時間を無駄にすることはありません。したがって、ブラウザーは、CDN 参照が表示されるサイトに関係なく、ディスク上にキャッシュされた単一のコピーを使用できます。

于 2012-06-11T15:58:18.207 に答える
4

jQuery を追加しなくても、単純な JS 自体がはるかに効率的になります。

var obj = document.getElementById('myElement');
if (obj) {
    obj.innerHTML = obj.innerHTML.replace(/one/i,'two');
}

同じ関数内で同じセレクター操作を複数回繰り返すときはいつでも、通常はそれをローカル変数にキャッシュする必要があり、ここでは他の一時変数は必要ありません。

参考までに、のショートカットが必要な場合は、getElementById()そのためだけにライブラリ全体を含めることなく、独自のショートカットを非常に簡単に定義できます。 

window.$ = function(id) {
    return(document.getElementById(id));
}

基本的なセレクター操作を提供する、jQuery よりもはるかに小さいライブラリーもあります。jQuery自体は、セレクター操作が必要なときによく使用するSizzleライブラリを使用しています。

jQueryが提供するものの多くを使用/必要としている場合、jQueryに反対しているわけではありません。これは、ajax や多くの DOM 操作関数で特に役立ちます。ただし、ニーズが単純で、サイトの効率/速度/サイズが重要な場合は、すべての jQuery を含めるよりも効率的な方法がしばしばあります。

于 2012-06-11T16:04:53.183 に答える