jquery パフォーマンスの最適化に関する 22 の提案_jquery

まず、jQuery は JavaScript であることを覚えておいてください。これは、同じコーディング規約、スタイルガイド、ベストプラクティスを採用する必要があることを意味します。

まず、JavaScript の初心者の方は、「初心者のための 24 の JavaScript ベスト プラクティス」を読むことをお勧めします。これは、jQuery を始める前に読むことをお勧めします。

jQuery を使用する準備ができたら、次のガイドラインに従うことを強くお勧めします。

1. キャッシュ変数

DOM トラバーサルはコストがかかるため、再利用される要素をキャッシュするようにしてください。

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

//おっと
h=$ ('# 要素').height();
$('#element').css('height',h-20);

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

//提案
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);

2. グローバル変数を避ける

jQuery JavaScript と同様に、一般に、変数が関数スコープ内にあることを確認することが最善です。

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

//おっと
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);

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

//Suggestion
var $element =$( '#element');
var h=$element.height();
$element.css('height',h-20);

3. ハンガリー語の命名法を使用します

jQuery オブジェクトを簡単に識別できるように、変数の前に $ プレフィックスを追加します。

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

//おっと
var first= $(' #first');
var Second=$('#first');
var value=$first.val();

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

// 提案 - jQuery オブジェクトの先頭に次の文字を付けます。 $
var $first=$('#first');
var $second=$('#first'),
var value=$first.val();

4. var チェーンを使用する (単一 var モード)

複数の var ステートメントを 1 つのステートメントに結合するには、未割り当ての変数を最後に置くことをお勧めします。

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

var
$first=$( '#first '),
$second=$('#second'),
value=$first.val(),
k=3,
cookiestring='SOMECOOKIESPLEASE',
i,
j,
myArray={};

5. 「on」を使用してください

jQuery の新しいバージョンでは、より短い on("click") が click() のような関数の代わりに使用されます。以前のバージョンでは、on() は binding() でした。 jQuery 1.7 以降、イベント ハンドラーをアタッチするには on() が推奨されるメソッドです。ただし、一貫性を保つために、単に on() メソッドをまとめて使用することもできます。

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

//おっと
$first。 click(function (){
$first.css('border','1px 単色赤');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px 単色赤');
})

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

// 提案
$first。 on(' click',function(){
$first.css('border','1px 単色赤');
$first.css('color','blue');
} )

$first.on('hover',function(){
$first.css('border','1px 単色赤');
})

6. JavaScript を簡素化する

一般に、可能な限り関数を組み合わせることが最善です。

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

//おっと
$first。 click(function (){
$first.css('border','1px 単色赤');
$first.css('color','blue');
});

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

//提案
$first。 on(' click',function(){
$first.css({
'border':'1px 単色赤',
'color':'blue'
});
}) ;

7. チェーン操作

jQuery でメソッド チェーン操作を実装するのは非常に簡単です。以下を活用してください。

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

//おっと
$秒。 html(値 );
$秒.on('クリック',function(){
アラート('こんにちは皆さん');
});
$秒.fadeIn('遅い') ;
$sec.animate({height:'120px'},500);

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

//提案
$秒。 html(値 );
$秒.on('クリック',function(){
アラート('こんにちは皆さん');
}).fadeIn('遅い').animate({高さ: '120px' },500);

8. コードの可読性を維持する

コードを合理化し、チェーンを使用すると、コードが読みにくくなる可能性があります。ピンチや改行を追加すると、驚くべき効果が得られます。

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

//おっと
$秒。 html(値 );
$秒.on('クリック',function(){
アラート('こんにちは皆さん');
}).fadeIn('遅い').animate({高さ: '120px' },500);

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

//提案
$秒。 html(値 );
$秒
.on('クリック',function(){アラート('皆さんこんにちは');})
.fadeIn('遅い')
.animate( {height: '120px'},500);

9. 短絡評価を選択します

短絡評価は、&& (論理 AND) または || (論理 OR) 演算子を使用して、左から右に評価される式です。

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

//おっと
function initVar( $myVar) {
if(!$myVar) {
$myVar=$('#selector');
}
}

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

//Suggestion
function initVar( $myVar) {
$myVar=$myVar || $('#selector');
}

10. ショートカット

を選択します。

コードを合理化する 1 つの方法は、コーディングのショートカットを利用することです。

[code]
//おっと
if(collection.length > 0){..}

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

//Suggestion
if(collection .length) {..}

11. 負荷の高い操作中に要素を分離する

DOM 要素に対して多くの操作 (複数の属性や CSS スタイルを連続して設定する) を実行する予定がある場合は、最初に要素を切り離してから追加することをお勧めします。

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

//おっと
var
$container=$("#container"),
$containerLi=$("#container li"),
$element=null;

$element=$containerLi.first();
//... 多くの複雑な操作

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

//Suggestion
var
$container =$("#container"),
$containerLi=$container.find("li"),
$element=null;

$element=$containerLi.first().detach();
//... 多くの複雑な操作

$container.append($element);

12. スキルを覚える

jQuery でのメソッドの使用に慣れていない可能性があります。必ずドキュメントを確認してください。より良い、より高速な使用方法がある可能性があります。

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

//おっと
$(' #id' ).data(key,value);

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

// 提案 (効率的)
$.data ('#id',key,value);

13. サブクエリを使用してキャッシュされた親要素

前述したように、DOM トラバーサルはコストのかかる操作です。一般的なアプローチは、親要素をキャッシュし、子要素を選択するときにこれらのキャッシュされた要素を再利用することです。

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

//おっと
var
$container =$('#container'),
$containerLi=$('#container li'),
$containerLiSpan=$('#container li span');

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

// 提案 (効率的)
var
$container=$('#container '),
$containerLi=$container.find('li'),
$containerLiSpan= $containerLi.find('span');

14. ユニバーサルセレクターを避ける

ユニバーサル セレクターを子孫セレクターに入れると、パフォーマンスが著しく低下します。

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

//おっと
$(' .container > ; *');

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

//提案
$(' .container' ).children();

15. 暗黙的なユニバーサルセレクターを避ける

ユニバーサル セレクターは暗黙的である場合があり、見つけるのが困難です。

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

//おっと
$(' .someclass: ラジオ');

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

//提案
$(' .someclass input :radio');

16. 最適化セレクター

たとえば、ID セレクターは一意である必要があるため、セレクターを追加する必要はありません。

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

//おっと
$(' div#myid ');
$('div#footer a.myLink');

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

// 提案
$(' #myid' );
$('#footer .myLink');

17. 複数の ID セレクターを避ける

ID セレクターは一意である必要があり、追加のセレクターを追加する必要はなく、複数の子孫 ID セレクターも必要ないことが強調されます。

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

//おっと
$(' #アウター # インナー');

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

//提案
$(' #inner' );

18. 最新バージョンを使用してください

通常、新しいバージョンはより優れており、より軽量でより効率的です。明らかに、サポートしたいコードの互換性を考慮する必要があります。たとえば、バージョン 2.0 は Internet Explorer 6/7/8 をサポートしていません。

19. 非推奨のメソッドを放棄する

新しいバージョンごとに非推奨のメソッドに注意を払い、これらのメソッドの使用を避けることが非常に重要です。

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

//おっと - ライブは中止されました
$( '#stuff').live('click',function() {
console.log('hooray');
});

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

// 提案
$(' #stuff' ).on('click',function() {
console.log('hooray');
});
// 注: これは不適切な可能性があります。ライブである必要があります。リアルタイムのバインディングを実現できますが、デリゲートの方が適切かもしれません

20. CDN を活用する

Google の CND は、ユーザーに最も近いキャッシュが確実に選択され、迅速に応答します。 (Google CNDを利用する場合はご自身でアドレスを検索してください。ここのアドレスは利用できません。jquery公式サイトが提供するCDNを推奨します。)

21. 必要に応じて jQuery と JavaScript のネイティブ コードを組み合わせる

上で述べたように、jQuery は JavaScript です。つまり、jQuery で実行できることはすべて、ネイティブ コードでも実行できます。ネイティブ コード (またはバニラ) は、jQuery よりも読みにくく保守しにくい可能性があり、コードは長くなります。しかし、それはより効率的であることも意味します (通常、基礎となるコードに近づくほど可読性が低くなり、パフォーマンスが向上します。たとえば、アセンブリには当然より強力な人材が必要です)。ネイティブ コードよりも小さく、軽く、効率的なフレームワークは存在しないことに留意してください (注: テスト リンクはもう有効ではありません。テスト コードはオンラインで検索できます)。

バニラと jQuery のパフォーマンスの違いを考慮すると、両方の長所を活かし、(可能であれば) jQuery と同等のネイティブ コードを使用することを強くお勧めします。

22. 最後のアドバイス

最後に、この記事は、jQuery のパフォーマンスの向上とその他の優れた提案を目的として記録しました。このトピックをさらに深く掘り下げたい場合は、非常に楽しいことがわかります。 jQuery は必須ではなく、単なるオプションであることに注意してください。なぜそれを使いたいのか考えてみましょう。 DOM操作?アヤックス？ステンシル？ CSSアニメーション？それともセレクターエンジン？おそらく、JavaScript マイクロフレームワークまたは jQuery のカスタム バージョンを選択する方がよいでしょう。