jQuery を改善し、効率を 1,000 倍向上させる 25 のステップ

1. Google コードから jQuery をロードする
Google コードでは、サーバーから直接ロードするよりも、Google コードから jQuery をロードする方が優れています。さらなる利点。 サーバー の帯域幅を節約し、Google のコンテンツ配信ネットワーク (CDN) から JS ライブラリを迅速にロードできます。さらに重要なのは、ユーザーが Google Code で公開されているサイトにアクセスすると、そのサイトは キャッシュされるということです。
これは理にかなっています。キャッシュされていない jQuery の同じコピーを使用しているサイトがどれだけあることか。これは簡単に実行できます。

2. チートシートを使用します
jQuery に限らず、多くのプログラミング言語にも同様のチートシートがあり、A4 で簡単です各機能が紙の上でどのように使用されているかを確認します。幸いなことに、親切な人々がすでに完璧な jQuery チートシートを作成しています:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat -sheet/
http://colorcharge.com/jquery/

3. すべてのスクリプトを統合して縮小します
はい、これは JavaScript の一般的なトリックです。ただし、jQuery を使用する大規模なプロジェクトでは、関連する多くの jQuery プラグイン (このサイトではイージング、localScroll、lightbox、preload を使用します) を使用する可能性があるため、通常は適用可能です。ブラウザは (ほとんどの場合) JS スクリプトを同時に読み込むことができません。つまり、多くのスクリプトを同時に読み込むと、ページの読み込み速度が遅くなります。したがって、これらのスクリプトをすべてのページにロードする場合は、公開する前に、これらのスクリプトを少し大きな JS スクリプトに統合することを検討する必要があります。一部の jQuery プラグインはすでに縮小されていますが、JS スクリプトと縮小されていないスクリプトをパッケージ化する必要があります。完了には数秒しかかかりません。
個人的には Packer by Dean Edwards

をお勧めします

4. Firebug の優れたコンソールロギングツールを使用します
Firebug をまだインストールしていない場合は、必ずインストールしてください。その他の多くの便利な機能 (http トラフィックの検査や CSS の問題の発見など) に加えて、JS スクリプトを簡単にデバッグできる優れたロギングコマンドも備えています。
ここでは、Firebug のすべての機能について詳しく説明します。
私のお気に入りの機能は「console.info」です。これを使用すると、alert;「console.time」を使用せずに情報と変数値をコンソールに出力できます。コードセットにタイマーを設定して、JS スクリプトの実行にかかる時間を計算できます。実行はすべて簡単です:

コードをコピーしますコードは次のとおりです:

console。 time( 'リストを作成'); 
for (i = 0; i var myList = $('.myList'); 
myList.append('これはリストですitem ' i); 
} 
console.timeEnd('create list'); 

5. キャッシュ
により選択操作を最小限に抑えます。 jQuery のセレクターは素晴らしいです。これらはページ上の要素を見つけるための非常に簡単な方法ですが、内部的には選択操作を実行するために多くの手順を実行する必要があり、これらを誤って使用すると、すべての処理が大幅に遅くなる可能性があります。
同じ要素を何度も選択する場合 (例: ループ内)、その要素を 1 回選択してメモリに保存し、コアコンテンツで操作することができます。以下の例を見てください。ここではループを使用して UL にエントリを追加します。

コードをコピーします。コードは次のとおりです。

 
for (i = 0; i var myList = $('.myList'); 
myList.append('これはリスト項目です ' i); 
 } 

Firefox 3 を使用した私の PC ではこれに 1066 ミリ秒かかりました (IE6 を想像してください!)。これは JavaScript としてはかなり遅いです。次に、選択操作を 1 つだけ使用する次のコードを見てみましょう。

コードをコピーしますコードは次のとおりです。 :

var myList = $('.myList'); 
for (i = 0; i myList.append('これはリスト項目です' i) ; 
} 

所要時間はわずか 224 ミリ秒で、コードを 1 行移動するだけで 4 倍近く速くなります。

6. DOM 操作を最小限に抑える
DOM への挿入操作を減らすことで、上記のコードの実行を高速化できます。 DOM 挿入操作 (.append()、.prepend()、.after()、.wrap() など) は非常に時間がかかり、これらの操作を実行するとプログラムの実行が遅くなります。
私たちがしなければならないのは、文字列連結を使用して項目のリストを作成し、.html() などの関数を使用して項目をリストに追加することだけです。次の例を参照してください。

コードをコピーしますコードは次のとおりです:

var myList = $(' #myList'); 
for (i=0; imyList.append('これはリスト項目です ' i); >
 私の PC では 216ms かかりましたが、これはわずか約 1/5 秒です。ただし、文字列を使用してリスト項目を作成する場合は、次の HTML メソッドを使用して挿入操作を完了します: 

コードをコピーコードは次のとおりです。次のように:var myList = $('.myList');

var myListItems = '';

for (i = 0; i myListItems = ' これはリスト項目 ' i '
'; 
} 
myListItems) 


185 ミリ秒かかりましたそれほど速くはありませんが、時間も 31 ミリ秒短縮されました。 

7. DOM 挿入操作を扱うときは、必要なコンテンツを要素で囲みます。
まあ、なぜこれを行うのかは聞かないでください (あると思います)経験豊富なプログラマーが説明します)。
上記の例では、.html() を使用して 1000 個の項目を UL に挿入します。挿入操作の前に項目を UL タグでラップし、完全な UL を別の DIV タグに挿入すると、実際には 1000 個のタグではなく 1 個のタグのみが挿入されるため、より効率的であるように見えます。次の例を見てください:

コードをコピーコードは次のとおりです:var myList = $(' .myList');

var myListItems = '

for (i = 0; i myListItems = 'これはリスト項目です ' i ''; 
myListItems = ''; 

現在、所要時間はわずか 19 ミリ秒であり、前の最初の例と比較して 50 倍の大幅な改善です。 

8. 可能な限りクラスの代わりに ID を使用します

前の例を変更して、作成する各 LI が一意のクラスを持つようにしました。次に、一度に 1 つの要素を選択しながら処理を繰り返します。

コードは次のとおりです: // リストを作成します var myList = $('.myList'); var myListItems = '

これはリスト項目です

';
myList .html(myListItems);
// 各項目を 1 回選択します
for (i = 0; i var selectedItem = $('.listItem' i);
}

予想どおり、私のブラウザでは 5066 ミリ秒 (5 秒以上) かかりました。そこで、クラスの代わりに ID を使用し、ID で選択するように上記のコードを変更しました。

コードをコピー

コードは次のとおりです:

 
// リストを作成します 
var myList = $('.myList'); 
var myListItems = ''; 
for (i = 0; i myListItems = 'これはリスト項目です
' 
} 
myListItems = ' '; 
myList.html(myListItems); 
// 各項目を 1 回選択します 
for (i = 0; i var selectedItem = $('#listItem' i); 
} 

所要時間はわずか 61 ミリ秒で、ほぼ 100 倍高速です

9. セレクターにコンテキストを提供します
デフォルトでは、$('.myDiv') のようなセレクターを使用すると、DOM ドキュメント要素全体が検索されます。これには多大なコストがかかります。
選択操作を実行するとき、jQuery 関数は 2 番目のパラメーターを指定できます: jQuery(expression, context) セレクターにコンテキストを提供すると、要素の検索は DOM ドキュメント全体ではなく、このコンテキストで実行されます。要素。
これを説明するために、前のコードの最初の部分を使用してみましょう。それぞれが個別のクラスを持つ 1000 個の項目を含む UL を作成します。
その後、繰り返して一度に 1 つの項目を選択します。クラスごとに 1000 個の項目をすべて選択するには 5 秒以上かかることに注意してください。

コードをコピーコードは次のとおりです。

var selectedItem = $('#listItem' i);

次に、UL 内でのみ選択を実行するコンテキストを追加しました。

コードをコピーコードは次のとおりです:

var selectedItem = $('#listItem' i, $('.myList'));

効率は悪く、依然として 3818 ミリ秒かかりましたが、わずかな修正で 25% の速度向上を達成しました。
10. メソッドチェーンを正しく使用する
jQuery の最も優れた機能の 1 つは、jQuery が継続的にメソッド呼び出しを実行できることです。たとえば、要素のクラスを切り替えたいとします。

コードをコピーしますコードは次のとおりです:

$('myDiv').removeClass('off').addClass('on');

あなたが私と同じなら、その後さらに使用できるかもしれません最初の 5 分で jQuery を学習します。まず第一に、行をまたいで動作することができます (jQuery は JavaScript です)。つまり、次のようなきちんとしたコードを書くことができます:

コードをコピーコードは次のとおりです:

 
$('#mypanel') 
.find('TABLE .firstCol') 
.removeClass('.firstCol') 
 .css('background' : 'red') 
.append('このセルは現在赤色です'); 

リンクされたリストを使用する習慣は、デバイスの使用の選択肢を減らすのに役立ちます。ただし、1 つの要素に対して複数の機能を実行したい場合は、さらに深く掘り下げて使用できますが、操作の要素を何らかの方法で変更します:

コードをコピーコードは次のとおりです。

$('#myTable').find('.firstColumn').css('background','red');

テーブルを選択し、クラス「firstColumn」を持つセルを見つけて、その背景を赤にしました。
次に、クラス「lastColumn」を持つすべてのセルの背景を青に設定します。 find() 関数を使用してクラスが "firstColumn" ではないすべてのセルを除外したため、テーブルで選択操作を再度使用する必要がありますが、継続的にメソッドを呼び出すことはできないでしょうか。幸いなことに、jQuery には、一致した要素リストを前の状態に変更する end() 関数が用意されているため、メソッドリストを実行できるようになります。 >
コードは次のとおりです:

$('#myTable') .find('.firstColumn') .css('background','red' ) .end() .find('.lastColumn') .css('background','blue');

 
呼び出しを連鎖できるメソッドを作成するカスタム jQuery 関数も簡単です。要素を変更して要素を返す関数を作成するだけです。 

コードをコピー

コードは次のとおりです:

 
$.fn.makeRed = function() { 
return $(this).css('background', 'red'); 
} 
$('#myTable') .find('.firstColumn').makeRed().append('hello'); 

とても簡単です。

11. エフェクトの正しい使い方を学ぶ
jQuery を初めて使い始めたとき、これがとても気に入りました。slideDown などの事前定義されたさまざまなアニメーション効果を簡単に使用できます。 () と fadeIn()。 jQuery が提供する animate() メソッドは非常に使いやすく強力なので、簡単に深く使用できます。実際、jQuery ソースコードの多くのメソッドは、animate() 関数を通じて効果を実現します。

コードをコピーコードは次のとおりです。

 
slideDown: function(speed,callback){ 
 return this.animate({height: "show"}, 速度, callback); 
}, 

fadeIn: function(speed, callback){ 
return this.animate({ opacity: " show"},speed,callback); 
} 

animate() メソッドは CSS にのみ作用し、値に基づいてスムーズに変換します。したがって、幅、高さ、不透明度、背景色、上、左、余白、色、フォントサイズなどを自由に変更できます。
メニュー項目に高さの変更を追加するのは簡単です:

コードをコピーしますコードは次のとおりです:

 
$('#myList li').mouseover(function() { 
$(this).animate({"高さ": 100}, "遅い"); 
}); 

他の jQuery 関数とは異なり、アニメーション効果は自動的にキューに入れられるため、最初の効果が完了した後に 2 番目の効果を実行する場合は、animate メソッドを 2 回呼び出す必要があります:

コードをコピーコードは次のとおりです:

 
$('#myBox').mouseover(function() { 
$(this).animate({ "幅": 200 }, "遅い"); 
$(this).animate({"高さ": 200}, "遅い"); );

アニメーション効果を同時に発生させたい場合は、すべてのスタイルをパラメータオブジェクトとしてメソッドに渡す必要があります:

コードをコピーコードは次のとおりです:

$('#myBox').mouseover(function() { 
$(this) .animate({ "width" : 200, "height": 200 }, "slow"); 

 
値が数値であるプロパティをアニメーション化できます。 

色や背景色などの数値以外のプロパティをアニメーション化するのに役立つプラグインをダウンロードすることもできます。
12. イベントプロキシを理解する

JQuery を使用すると、DOM 要素にイベントをシームレスに追加できます。これは優れた機能ですが、要素にイベントを追加しすぎると非効率的になります。多くの場合、イベントプロキシを使用すると、より少ない数のイベントで同じ目標を達成できます。説明する最もよい方法は例を使用することです:

コードをコピーコードは次のとおりです:

$(' #myTable TD').click(function(){

$(this).css('background', 'red'); 
});テーブルをクリックすると、上記のコードはすべてのセルの背景を赤にします。たとえば、10 列、50 行のグリッドがある場合、500 個のイベントがバインドされます。さて、ここでイベント プロキシが表示されます: 

コードをコピーします

コードは次のとおりです: $('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('background', 'red');

});

e' には、実際にクリックイベントを受け取ったターゲット要素を含むイベント情報が含まれます。私たちがしなければならないのは、どのセルがクリックされたかを確認することだけです。かなり賢いですね！
イベントプロキシには別の利点があります。通常、イベントを要素のコレクションにバインドすると、イベントはコレクション要素にのみバインドされます。 DOM に新しい要素を追加すると、セレクターによってこれらの新しい要素が一致したとしても、これらの新しい要素はイベントハンドラーにバインドされないため (同意されますか?)、イベントは発生しません。
イベントプロキシを使用する場合でも、DOM にバインドされた後でも複数の一致する要素をイベントに追加でき、それらは引き続き正常に機能します。
13. クラスを使用して状態を保存する
これは、HTML に情報を保存する最も基本的な方法です。 jQuery はクラスに基づいて要素を操作するのが得意なので、要素に関する状態情報を保存する必要がある場合は、追加のクラスを使用してそれを保存してみてはいかがでしょうか。
これが例です。拡張メニューを作成したいと考えています。ボタンをクリックすると、slideDown()とslideUp()でメニューを拡大・縮小したいと考えています。以下の HTML を見てください:

コードをコピーしますコードは次のとおりです:

< ;div class=" 展開されたメニュー項目"> 
 
 🎜>
メニュー項目 1

メニュー項目 3

とても簡単です。ラッパー DIV に追加のクラスを追加するだけで、項目のステータスを通知するだけです。したがって、ボタンをクリックした後に必要なのは、対応する slideUp() メソッドと slideDown() メソッドを実行するクリック イベント処理だけです。

コードをコピー

コードは次のとおりです: $('.button').click (function( ) {

var menuItem = $(this).parent();

var パネル = menuItem.find('.panel'); 

if (menuItem.hasClass ("expanded ")) { 
menuItem.removeClass('expanded').addClass('collapsed'); 
panel.slideUp(); 
else if (menuItem.hasClass(")折りたたまれた") ) { 
menuItem.removeClass('collapsed').addClass('expanded'); 
panel.slideDown(); 
} 
}); 

 

これは非常に単純な例ですが、要素または HTML フラグメントに追加のクラスを追加して、あらゆる種類の情報を保存できます。 
ただし、単純な状況に加えて、次のテクニックを使用する必要があります。 

14. より良い方法は、jQuery の組み込み data() メソッドを使用して状態を保存することです

いくつかの理由により、これに関して適切なドキュメントはありません。。 jQuery には組み込みの data() メソッドが用意されており、DOM 要素とは異なり、キー/値型のデータを格納するために使用できます。データの保存は非常に簡単です:
コードをコピー

コードは次のとおりです: $ ('# myDiv').data('currentState', 'off');

同じ HTML コンテンツを使用できるように、前の例のコードを変更します (「展開された」を除く) " class) および data() 関数を使用して状態を保存します:

コードをコピー

コードは次のとおりです: $ ('.button').click(function() { var menuItem = $(this).parent();

var パネル = menuItem.find('.パネル');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown(); 🎜>else {
menuItem.data('collapsed', true);
}
};
このメソッドの使用法がより洗練されていることにも同意していただけると思います。data() と RemoveData() の詳細については、jQuery の内部
15. 独自のセレクターを作成する
jQuery には、ID、クラス、タグ、属性、その他の要素によって選択するための組み込みセレクターが多数あります。ただし、他のコンテンツに基づいて要素を選択する必要があり、jQuery がこのセレクターを提供していない場合はどうすればよいでしょうか? そうですね、解決策の 1 つは、最初から要素にクラスを追加し、これらのクラスを要素の選択操作に使用することです。ただし、新しいセレクターを使用して jQuery を拡張するのは難しいことがわかっています。
説明するための最良の方法は、例を使用することです:

コードをコピーしますコードは次のとおりです:

 $.extend($.expr[':'], { 
over100pixels: function(a) { 
return $(a)​​.height() > 100; 
} 
}); 

$('.box:over100pixels').click(function() { 
alert('クリックした要素の高さが 100 ピクセルを超えています'); 
}) ; 

 

コードの前の部分では、100px を超えるすべての要素を検索するカスタムセレクターを作成します。次のコードは、セレクターを使用して見つかった要素にクリックイベントをバインドするだけです。
ここでは詳しい説明はしませんが、その威力は想像できると思います。 Google で「カスタム jQuery セレクター」を検索すると、この例がたくさん表示されます。

16. HTML を最小化し、ページの読み込み後に変更します。このタイトルにはあまり意味がないかもしれませんが、このトリックはコードを合理化し、コードサイズとページのダウンロード時間を削減して、ページの最適化に役立ちます。検索エンジン。以下の例を参照してください。

コードをコピーしますコードは次のとおりです。

これはフィールド番号 1

;

jQuery を改善し、効率を 1,000 倍向上させる 25 のステップ_jquery

これはエラーメッセージです

これはフィールド番号 2

/div>

div>

これはエラーメッセージです

🎜>

上記は HTML の具体例であり、説明のために若干変更されています。このコードは非常に醜いと思うでしょう。このようなコードが非常に長い場合、かなり長くて見苦しいページが完成するでしょう。したがって、次のように処理できます:

コードをコピーします

コードは次のとおりです:

これはフィールド 1

これはフィールド 2

>これはフィールド 3

これはフィールド 4

これはフィールド 5 div>

必要なのは、jQuery 操作によるページの読み込みが完了した後で、醜い HTML を追加することだけです: 

コードをコピー

コードは次のとおりです。

$(document).ready(function() { $('.field').before('< ;div class="fieldOuter ">

'); $('.field').after('

;

これはエラーメッセージです

');
常にこれを行うことをお勧めするわけではありません。ページが読み込まれた後、ページが一瞬フラッシュするのが見えますが、場合によっては、大量の HTML コンテンツが繰り返されている場合、この方法を使用して表示できるページコードが大幅に削減されます。サイズを変更し、無関係で繰り返しのタグを減らすことで、SEO に利益をもたらすことができます。
17. 速度と SEO を考慮して、コンテンツの読み込みを遅らせる
ページの読み込み速度を向上させ、Spider によって検索される HTML コンテンツをスムーズにする方法もあります。ページの読み込み後に AJAX リクエストを使用して追加のコンテンツを読み込むことで、ユーザーはすぐにブラウジングを開始し、インデックスを付けたいコンテンツをスパイダーに表示させることができます。
私たちはすでにこのテクノロジーを自社のウェブサイトで使用しています。このページの上部にある紫色のボタンを押すと、3 つの表、ルート案内、Google マップがポップアップ表示され、ページのサイズが 3 倍になります。したがって、これらの HTML コンテンツを静的ページに配置し、ページが読み込まれた後に、load() 関数を通じてそれを読み込むだけです:

コードをコピーコードは次のとおりです:

 
$('#forms').load('content/headerForms.html', function() { 
// ここでコードが実行されますコンテンツが読み込まれたら 
// すべてのイベント ハンドラーなどをここに配置します。
}); 

このトリックはページのどこでも使用しません。これを考慮する必要があります。追加のページ要求を行う必要があり、ページ上の一部のコンテンツはユーザーにすぐに表示できませんが、この手法を正しく使用すると、最適化に非常に役立ちます。
18. jQuery が提供するツール機能を使用する
jQuery には Flash エフェクトだけではありません。 jQuery の作者は、JacaScript の欠点の一部を補う、非常に実用的なメソッドもいくつか提供しています。
http://docs.jquery.com/Utilities
特に、いくつかの一般的な配列関数に対するブラウザーのサポートを提供するのがパッチです。 jQuery には、配列の反復、フィルター、クローン、マージ、および重複の削除を行うメソッドが用意されています。
その他の一般的に使用される関数には、ドロップダウンボックスでの選択内容の取得などがあります。従来の JavaScript メソッドでは、getElementById を使用して