jQuery_jquery のパフォーマンスを向上させるために 7 つのことを実行してください

1. ループの外に追加

DOM に関係するものにはすべて代償が伴います。多数の要素を DOM に追加する場合は、複数回行うのではなく、すべてを一度に追加する必要があります。ループに要素を追加するときによくある問題が発生します。

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

$.each( myArray, function( i , item ) {
var newListItem = "

" item "

";
$( "#ballers" ).append( newListItem );
});

一般的な手法は、文書の断片を使用することです。ループの各反復で、DOM 要素の代わりに要素をフラグメントに追加します。ループが終了したら、フラグメントを DOM 要素に追加します。

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

var frag = document.createDocumentFragment();

$.each( myArray, function( i, item ) {

var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );

newListItem.appendChild( itemText );

frag.appendChild( newListItem );

});

$( "#ballers" )[ 0 ].appendChild( frag );

もう 1 つの簡単なトリックは、ループの反復ごとに文字列を継続的に構築することです。ループが終了したら、DOM 要素の HTML をこの文字列に設定します。

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

var myHtml = "";

$.each( myArray, function( i, item ) {

myHtml = "

" item "

";

});

$( "#ballers" ).html( myHtml );

もちろん、他にも試すことができるテクニックがあります。 jsperf というサイトは、これらのプロパティをテストするための優れた方法を提供します。このサイトでは、各手法のベンチマークを実行し、クロスプラットフォームのパフォーマンス結果を視覚化できます。

2. ループ中のキャッシュ長

for ループでは、事前にキャッシュする必要がある配列の長さプロパティに毎回アクセスしないでください。

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

var myLength = myArray.length;

for ( var i = 0; i

// 何かをします

}

3. 操作する要素を切り離します

DOM の操作は遅いため、できるだけ調整を少なくして操作する必要があります。 jQuery は、この問題を解決するために、バージョン 1.4 で detach() と呼ばれるメソッドを導入しました。これにより、要素を操作するときに DOM から要素を切り離すことができます。

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

var $table = $( "#myTable " );
var $parent = $table.parent();

$table.detach();

// ... テーブルに大量の行を追加します

$parent.append( $table );

4. 存在しない要素に基づいて行動しない

空のセレクターで多くのコードを実行する予定がある場合、jQuery はヒントを提供しません。エラーが発生しなかったかのように実行を続けます。セレクターに含まれる要素の数を確認するのはあなた次第です。

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

// 悪い: これは、前に 3 つの関数を実行します。 it
// 選択範囲に何もないことがわかります
$( "#nouchthing" ).slideUp();

// より良い:
var $mySelection = $( "#nouchthing" );

if ( $mySelection.length ) {

$mySelection.slideUp();

}

// ベスト: doOnce プラグインを追加します。
jQuery.fn.doOnce = function( func ) {

this.length && func.apply( this );

これを返します;

}

$( "li.cartitems" ).doOnce(function() {

// ajax にしてください。o/

});

このガイドは、セレクターに要素が含まれていない場合に多くのオーバーヘッドを必要とする jQuery UI ウィジェットに特に役立ちます。

5. セレクターを最適化する

多くのブラウザーが document.querySelectorAll() メソッドを実装し、jQuery がセレクターの負担をブラウザーに移すため、セレクターの最適化は以前ほど重要ではありません。ただし、留意すべきヒントがまだいくつかあります。

ID ベースのセレクター

セレクターを ID で開始することが常に最善です。

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

// 高速:
$( "#container div.robotarm" );

// 超高速:
$( "#container" ).find( "div.robotarm" );

最初のセレクターがノイズの多いセレクター エンジンを経由せずに処理されるため、.find() メソッドを使用すると高速になります -- ID のみのセレクターはすでに document.getElementById() メソッドを使用しています ネイティブであるため処理が高速ですブラウザ。

特異性

セレクターの右側をできるだけ詳しく説明し、左側についてはその逆を行います。

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

// 最適化されていません:
$( "div. data .gonzalez" );

// 最適化:
$( ".data td.gonzalez" );

セレクターの右端には tag.class の形式でセレクターを記述し、左側には tag または .class のみを使用するようにしてください。

特異性の過度の使用を避ける

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

$( ".data table.attendees td .gonzalez" );

// より良い: 可能であれば中央を削除します。
$( ".data td.gonzalez" );

「DOM」を使用すると、要素を検索するときにセレクター エンジンがそれほど多くの反復を行う必要がないため、常にセレクターのパフォーマンスが向上します。

ユニバーサルセレクターの使用を避ける

セレクターが明示的または暗黙的に未定義の範囲内で一致する場合、パフォーマンスに大きな影響を与えます。

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

$( ".buttons > *" ); // 非常に高価です。
$( ".buttons" ).children(); // はるかに優れています。

$( ".category :radio" ); // 暗黙のユニバーサル選択。 🎜> $ ( ".category *:radio" ); // 同じことですが、今度は明示的にします。
$( ".category input:radio" ) // はるかに優れています。
多くの CSS を変更するためにスタイルシートを使用します。要素

.css() メソッドを使用して 20 を超える要素の CSS を変更する場合は、代わりにスタイル タグをページに追加することを検討してください。これにより、速度が 60% 近く向上する可能性があります。

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

// 要素は 20 個まで問題ありません。その後は遅い:
$( "a.swedberg" ).css( "color", "#0769ad" );

// はるかに高速:
$( "")
.appendTo( "head" );
jQuery をブラック ボックスとして扱わないでください

jQuery ソース コードをドキュメントとして扱い、お気に入り (http://bit.ly/jqsource) に保存して、頻繁に参照できます。