jq最佳化方法

1.使用鍊式寫法

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

　javascript的事件模型，採用"冒泡"模式，也就是說，子元素的事件會逐級向上"冒泡"，成為父元素的事件。

　利用這一點，可以大幅簡化事件的綁定。例如，有一個表格（table元素），裡面有100個格子（td元素），現在

要求在每個格子上面綁定一個點擊事件（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）較慢的選擇器：class選擇器

　　$('.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()方法，一個個遍歷節點。它比最快的形式大約慢50%。

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

　　jQuery內部使用Sizzle引擎，處理各種選擇器。 Sizzle引擎的選擇順序是從右到左，所以這條語句是先選.child，然後再一個

個過濾出父元素#parent，這導致它比最快的形式大約慢70%。

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

　　這條語句與上一條是一樣的情況。但是，上一條只選擇直接的子元素，這一條可以於選擇多級子元素，所以它的速度更慢，

大概比最快的形式慢了77% 。

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

　　jQuery內部這句語句轉成$('#parent').find('.child')，比最快的形式慢了23%。

　　所以，最佳選擇是$parent.find('.child')。而且，由於$parent往往在前面的操作已經生成，jQuery會進行緩存，所以進一步加

快了執行速度。

以上是jq最佳化方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！