jQuery_jquery のパフォーマンスを向上させるために必要な 7 つのこと

jQuery のパフォーマンスを向上させるために行う 7 つのことを知りたいですか?

1. ループの外に追加

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

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

  var newListItem = "<li>" + item + "</li>";
 
 $( "#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 += "<li>" + item + "</li>";

});

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

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

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

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

var myLength = myArray.length;

for ( var i = 0; i < myLength; i++ ) {

  // do stuff

}

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

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

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

$table.detach();

// ... add lots and lots of rows to table

$parent.append( $table );

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

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

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();

// Better:
var $mySelection = $( "#nosuchthing" );

if ( $mySelection.length ) {

  $mySelection.slideUp();

}

// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {

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

  return this;

}

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


  // make it ajax! \o/


});

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

5. セレクターの最適化

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

ID ベースのセレクター

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

// Fast:
 $( "#container div.robotarm" );
 
 // Super-fast:
 $( "#container" ).find( "div.robotarm" );

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

特異性

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

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
 $( ".data td.gonzalez" );

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

具体性の過度の使用を避ける

 $( ".data table.attendees td.gonzalez" );
 
 // Better: Drop the middle if possible.
 $( ".data td.gonzalez" );

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

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

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

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
 $( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
复制代码
6. Use Stylesheets for Changing CSS on Many Elements

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

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  .appendTo( "head" );

7. jQuery をブラックボックスとして扱わないでください

上記は jQuery のパフォーマンスを向上させるために必要な 7 つのことです。