jq optimization method

1. Use chain writing

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

The event model of JavaScript adopts the "bubble" mode, that is to say, the events of the child elements will "bubble" upward step by step and become the events of the parent element. .

Taking advantage of this, event binding can be greatly simplified. For example, there is a table (table element) with 100 cells (td element) in it. Now

requires binding a click event (click) to each cell. Do you need to execute the following command? 100 times?

<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. Use the right selector

(1) The fastest selector: id selector and element label selector

When encountering these selectors, jQuery internally automatically calls the browser's native methods (such as getElementById()), so they execute quickly.

(2) Slower selector: class selector

The performance of $('.className') depends on different browsers.

Firefox, Safari, Chrome, and Opera browsers all have native methods getElementByClassName(), so the speed is not slow. However, IE5-IE8 have

not deployed this method, so this selector will be quite slow in IE.

4. The relationship between child elements and parent elements

<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)·

This statement means, given a DOM object, then select a child element from it. jQuery will automatically convert this statement into $.parent.find('child'),

This will cause a certain performance loss. It is 5%-10% slower than the fastest form.

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

This is the fastest statement . The .find() method will call the browser's native methods (getElementById, getElementByName, getElementByTagName

, etc.), so it is faster.

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

This statement is inside jQuery, Will use $.sibling() and JavaScript's nextSibling() method to traverse nodes one by one. It is approximately 50% slower than the fastest form.

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

jQuery uses the Sizzle engine internally. Handle various selectors. The selection order of the Sizzle engine is from right to left, so this statement selects .child first, and then filters out the parent element #parent one by one, which results in it being the fastest The form is about 70% slower.

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

This statement is the same as the previous one Case. However, the previous one only selects direct sub-elements, while this one can select multi-level sub-elements, so it is slower,

, which is about 77% slower than the fastest form. .

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

internal jQuery This statement will be converted into $('#parent').find('.child'), which is 23% slower than the fastest form.

Therefore, the best choice is $parent.find('.child'). Moreover, since $parent is often generated in the previous operation, jQuery will cache it, so further adding

will speed up the execution.

The above is the detailed content of jq optimization method. For more information, please follow other related articles on the PHP Chinese website!