jQueryのパフォーマンス最適化手法の分析_jquery-jsチュートリアル-php.cn

jQueryのパフォーマンス最適化手法の分析_jquery

WBOY

リリース： 2016-05-16 16:13:25

オリジナル

1126 人が閲覧しました

この記事では、jQuery のパフォーマンス最適化手法をより詳細に分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. jQuery クラスライブラリの最新バージョンを使用します

jQuery の新しいバージョンには、以前のバージョンと比較してバグが修正され、いくつかの最適化が行われています。ただし、バージョンを変更した後は、コードが完全にテストされていない場合があることに注意してください。下位互換性があります。

2. 適切なセレクターを使用します

jQuery セレクターの最高のパフォーマンスから最悪のパフォーマンスまでは次のとおりです:

ID セレクター ($('#id', context) など)
タグセレクター ($('p', context)
など) クラスセレクター ($('.class', context)
など) 属性セレクター ($('[attribute=value]', context)
など) $(':hidden', context)

などの疑似クラスセレクター

補足と注意:

セレクターのコンテキストを指定して、配置された要素の範囲を狭めてみてください
ID を繰り返し変更しないでください: var $el = $('#list #item1')
ID を変更するタグやクラスを避けてください。エラーコード: var $el = $('ul #item1')
属性セレクターを使用する場合は、アクセスを高速化するためにタグセレクターを指定してください: var $el = $('a[title="link"]')

3. キャッシュオブジェクト

パフォーマンスが低下する方法は次のとおりです:

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

ログイン後にコピー

注: jQuery は各セレクターの作成プロセス中に DOM を検索するため、時間とパフォーマンスが消費されます。

より良い方法:

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

ログイン後にコピー

注: コード内で同じセレクターを複数回出現させないでください。

4. ループ中の DOM 操作

jQuery を使用すると、DOM ノードを簡単に追加、削除、変更できますが、for()、while()、$.each() などの一部のループでノードを処理する場合、以下に注目に値する例があります。 :

var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

ログイン後にコピー

注: ループ内で li ノードを 100 回追加すると、パフォーマンスが大幅に消費されるため、追加するすべてのノードを DOM ツリーに挿入する前に作成してから、DOM に追加することをお勧めします。すぐに木。より良い方法:

var $list = $('#list'),
  fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);

ログイン後にコピー

5. 配列

での jQuery オブジェクトの使用

jQuery セレクターを使用して、jQuery オブジェクトである結果を取得します。パフォーマンスの観点から、コードを高速化できる $.each() の代わりに単純な for ループまたは while ループを使用することをお勧めします。

次の点にも注意してください: 長さのチェックは、jQuery オブジェクトが存在するかどうかを確認する方法です。

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}

ログイン後にコピー

6. イベントエージェント

すべての JavaScript イベント (クリック、マウスオーバーなど) が親ノードにバブルアップされます。これは、複数の要素で同じ関数を呼び出す必要がある場合に便利です。

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...

ログイン後にコピー

注: このように、100 里ある場合、100 個のイベントがバインドされます。明らかに、これは非科学的であり、パフォーマンスの大幅な低下を引き起こします。

より良い方法は、イベントを li の親ノード ul に一度バインドし、event.target を通じて現在の要素がクリックされるようにすることです。

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});

ログイン後にコピー

7. コードを jQuery プラグインに変換します

毎回同じような jQuery コードを作成するのに時間を費やしている場合は、この類似したコードをプラグインに変換することを検討してください。これにより、コードがより再利用可能になり、コードを効果的に整理できます。

8. Javascript 配列 join() を使用して文字列を結合します

長い文字列を処理する場合、join() メソッドを使用するとパフォーマンスを最適化できます。

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));

ログイン後にコピー

9. HTML5 データ属性の合理的な使用

HTML5 の data 属性は、データの挿入、特にフロントエンドとバックエンド間のデータ交換に役立ちます。 jQuery の data() メソッドは、HTML5 属性を効果的に使用してデータを自動的に取得します。

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');

ログイン後にコピー

10. ネイティブ JavaScript メソッドを使用してみる

例: