jquery パフォーマンスの最適化に関する高度なヒント

jQuery を記述するとき、コードを記述する都合上、プログラム実行中にクライアントにもたらされるプレッシャーを無視してしまうことがあります。これに伴い、実行速度が遅くなったり、一部のローエンドのブラウザやローエンドのコンピュータでは実行できなくなるなどの問題が発生します。

したがって、より高速でスムーズな動作を実現するには、独自の jquery コードを最適化する必要があります。

jquery パフォーマンス最適化のための高度なテクニック以下では、主に 7 つの側面から jquery パフォーマンス最適化を紹介します。
1. CDN (コンテンツ配信ネットワーク) を介して jQuery ライブラリを導入します

2. DOM 操作を削減します

3. ネイティブ JS を適切に使用する

4. セレクターの最適化

5. jQuery オブジェクトのキャッシュ

6. 再利用可能な関数を定義する

7. 配列メソッドを使用して jQuery オブジェクトのコレクションを走査します

各方法の具体的な手順は以下で説明されています:

CDN (コンテンツ配信ネットワーク) を介した jQuery ライブラリの導入

Web サイトの JavaScript のパフォーマンスを向上させる最も簡単な手順は、jQuery ライブラリの最新バージョンを導入することです。通常、新しくリリースされたバージョンではパフォーマンスが向上し、いくつかのバグが修正されています。または、CDN を介して導入することも良い選択です。CDN を介して導入すると、Web サイトの読み込み時間を短縮できます。

CDN サービスのいくつかを次に示します:

<!-- Case 1 - jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script>
<!-- Case 4 - requesting the absolute latest jQuery version (use with caution) -->
<script src="http://code.jquery.com/jquery.min.js" ></script>

ログイン後にコピー

一部の国内 CDN サービス:

http://www.bootcdn.cn/jquery/
<!--新浪 CDN-->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--百度 CDN-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--Bootstrap CDN-->
http://www.bootcdn.cn/jquery/

ログイン後にコピー

DOM 操作を削減します

JavaScript のパフォーマンスは大幅に向上しましたが、DOM 操作は依然としてリソースを大量に消費するため、DOM 操作を減らす必要があります。これは、ページに多数の要素を挿入する場合に特に重要です。

例:

<div id="elem" ></div>

// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = 0; i < 100; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));

ログイン後にコピー

すべての要素をキャッシュして一度挿入すると、ページの再描画が 1 回だけトリガーされるため、パフォーマンスが向上します。 CSS スタイルプロパティにも同じことが当てはまります。

続きを読む: フロントエンドページがスタックしていますか? DOM 操作が原因である可能性があります。コードを最適化する必要があります

ネイティブ JS を適切に使用する

jQuery オブジェクトを作成すると、ある程度のオーバーヘッドが生じます。したがって、パフォーマンスがより重要な場合は、可能な限りネイティブ JavaScript を使用してください。ある意味では、そのほうが理解しやすく、記述するコードも少なくて済むかもしれません。例:

// 打印list中的li的id
$('#colors li' ). each(function(){
//将$(this).attr('id')方法替换为直接通过ID属性访问
console. log(this. id);
})

ログイン後にコピー

セレクターの最適化

より良いパフォーマンスが必要だが、それでも jQuery を使用したい場合は、jQuery セレクターの最適化を試すことができます。以下は、ブラウザのコンソール console.time メソッドと console.timeEnd メソッドを介してさまざまなセレクターの実行時間を記録するテストプログラムです。

HTML:

<div id="peanutButter" >
<div id="jelly" class=".jellyTime" ></div>
</div>
JS:

//测试程序
var iterations = 10000,
  i;
//--------------------------------------------
//Case 1: 很慢
console.time('Fancy');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div:first');
}
console.timeEnd('Fancy');
//--------------------------------------------
//Case 2: 比较好，但仍然很慢
console.time('Parent-child');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div');
}
console.timeEnd('Parent-child');
//--------------------------------------------
//Case 3: 一些浏览器会比较快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
  // 通过后代Class选择器
  $('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式 
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
  // 直接通过Class选择器
  $('.jellyTime');
}
console.timeEnd('By class name');
//--------------------------------------------
//Case 5: 推荐的方式 ID选择器
console.time('By id');
for (i = 0; i < iterations; i++) {
  $('#jelly');
}
console.timeEnd('By id');

ログイン後にコピー

実行結果:

jQuery オブジェクトのキャッシュ

セレクターを通じて新しい jQuery オブジェクトが構築されるたびに、jQuery のコアにある Sizzle エンジンが DOM を走査し、対応するセレクターを通じて実際の dom 要素と照合します。このメソッドは比較的非効率的ですが、document.querySelector メソッドを使用して、対応する Class パラメータを渡すことで、対応する要素を照合できます。ただし、IE8 より前のバージョンでは、このメソッドはサポートされていません。パフォーマンスを向上させる 1 つの方法は、変数を介して jQuery オブジェクトをキャッシュすることです。例:

<ul id="pancakes" >
     <li>first</li>
     <li>second</li>
     <li>third</li>
     <li>fourth</li>
     <li>fifth</li>
</ul>

ログイン後にコピー

JS:

// 不好的方式:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// ------------------------------------
// 推荐的方式:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// ------------------------------------
// 或者:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();

ログイン後にコピー

再利用可能な関数を定義する

例に直接移動します:

HTML：
<button id="menuButton" >Show Menu!</button>
<a href="#" id="menuLink" >Show Menu!</a>

ログイン後にコピー

JS:

//Bad: 
//这个会导致多个回调函数的副本占用内存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);

ログイン後にコピー

複数の要素を含む jQuery オブジェクトでインラインコールバック関数を定義すると (上記の最初の例のように)、コレクションのコピー内の要素ごとにコールバック関数がメモリに保存されます。

配列メソッドを使用して jQuery オブジェクトコレクションを走査します

気づいていないかもしれませんが、jQuery の各メソッドのこの洗練された実装には、パフォーマンスの面で犠牲が伴います。 jQuery オブジェクトをより高速に反復処理する方法があります。 jQuery オブジェクトコレクションは、長さと値の属性を持つ配列のようなオブジェクトです。プログラムを通じてパフォーマンスをテストできます:

HTML:

<ul id="testList" >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> 
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <!-- add 50 more -->
</ul>

ログイン後にコピー

JS:

var arr = $('li'),
  iterations = 100000;
//------------------------------
// Array实现：  
console.time('Native Loop');
for (var z = 0; z < iterations; z++) {
  var length = arr.length;
  for (var i = 0; i < length; i++) {
    arr[i];
  }
}
console.timeEnd('Native Loop');
//------------------------------
// each实现：  
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
  arr.each(function(i, val) {
    this;
  });
}
console.timeEnd('jQuery Each');

ログイン後にコピー

結果:

配列実装によるトラバーサルの方が実行効率が高いことがわかります。