jq最適化手法-jsチュートリアル-php.cn

jq最適化手法

一个新手

リリース： 2017-09-30 09:06:26

オリジナル

1805 人が閲覧しました

1. チェーンライティングを使用する

2.事件的委托处理（Event Delegation）

ログイン後にコピー

JavaScriptのイベントモデルは「バブル」モードを採用しています。つまり、子要素のイベントが段階的に上に「バブル」して親要素のイベントになります。

これを使用すると、イベントバインディングを大幅に簡素化できます。たとえば、100 個のセル (td 要素) を含むテーブル (table 要素) があり、

では各セルにクリックイベント (click) をバインドする必要があります。次のコマンドを 100 回実行する必要がありますか?

<span style="font-size: 15px">$("td").on("click", function(){
$(this).toggleClass("click");
});<br/>回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，<br/>这个事件会"冒泡"到父元素table上面，从而被监听到。<br/>因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。<br/>这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。<br/></span>

ログイン後にコピー

<span style="font-size: 15px">$("table").on("click", "td", function(){ $(this).toggleClass("click"); });<br/></span>

ログイン後にコピー

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

(1) 最も速いセレクター: ID セレクターと要素ラベルセレクター

これらのセレクターに遭遇すると、jQuery は自動的にブラウザーのネイティブメソッド (getElementById() など) を呼び出します。素早く。

(2) 遅いセレクター: クラスセレクター

$('.className') のパフォーマンスはブラウザーによって異なります。

Firefox、Safari、Chrome、OperaブラウザはすべてネイティブメソッドgetElementByClassName()を備えているため、速度は遅くありません。ただし、IE5 ～ IE8 ではこのメソッドが展開されていないため、IE ではこのセレクターは非常に遅くなります。

4. 子要素と親要素の関係

<span style="font-size: 15px">$(&#39;.child&#39;, $parent)

$parent.find(&#39;.child&#39;)

$parent.children(&#39;.child&#39;)

$(&#39;#parent > .child&#39;)

$(&#39;#parent .child&#39;)

$(&#39;.child&#39;, $(&#39;#parent&#39;))<br/></span>

ログイン後にコピー

(1) $('.child', $parent)·

この文の意味は、DOMオブジェクトを与えてから、ということです。子要素を選択します。 jQuery はこのステートメントを $.parent.find('child') に自動的に変換します。

これにより、パフォーマンスがある程度低下します。最速の形式よりも 5% ～ 10% 遅くなります。

(2) $parent.find('.child')

これが最速のステートメントです。 .find() メソッドはブラウザのネイティブメソッド (getElementById、getElementByName、getElementByTagName

など) を呼び出すため、高速になります。

(3) $parent.children('.child')

このステートメントは、jQuery 内の $.sibling() と JavaScript の nextSibling() メソッドを使用して、ノードを 1 つずつ走査します。最速の形式よりも約 50% 遅くなります。

(4) $('#parent > .child')

jQuery は内部で Sizzle エンジンを使用してさまざまなセレクターを処理します。シズルエンジンの選択順序は右から左であるため、このステートメントは最初に .child を選択し、次に親要素 #parent を 1 つずつフィルターで除外するため、最速の形式よりも約 70% 遅くなります。

(5) $('#parent .child')

この文は前の文と同じです。ただし、前の形式は直接のサブ要素のみを選択しますが、この形式は複数レベルのサブ要素を選択できるため、速度が遅くなり、

は最速の形式より約 77% 遅くなります。

(6) $('.child', $('#parent'))

jQuery は内部的にこのステートメントを $('#parent').find('.child ') に変換します、これは最速の形式より 23% 遅くなります。

ということで、最良の選択は $parent.find('.child') です。また、$parent は直前の操作で生成されることが多いため、jQuery がキャッシュするため、実行を高速化するためにさらに増やします。

以上がjq最適化手法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。