JQ-Optimierungsmethode

1. Verwenden Sie Kettenschreiben

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

Das Ereignismodell von JavaScript verwendet den „Blasen“-Modus, das heißt, die Ereignisse der untergeordneten Elemente „sprudeln“ Schritt für Schritt nach oben und werden das übergeordnete Element.

Dadurch kann die Ereignisbindung erheblich vereinfacht werden. Zum Beispiel gibt es eine Tabelle (Tabellenelement) mit 100 Zellen (TD-Element). Jetzt muss an jede Zelle ein Klickereignis (Klick) gebunden werden.

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

3. Verwenden Sie den richtigen Selektor

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

(1) Der schnellste Selektor: ID-Selektor und Elementlabel-Selektor

Wenn Sie auf diese stoßen. Bei der Auswahl von a Selektor ruft jQuery automatisch die nativen Methoden des Browsers (z. B. getElementById()) auf, sodass sie schnell ausgeführt werden.

(2) Langsamerer Selektor: Die Leistung des Klassenselektors

　$('.className') hängt von verschiedenen Browsern ab.

Firefox-, Safari-, Chrome- und Opera-Browser verfügen alle über native Methoden getElementByClassName(), sodass die Geschwindigkeit nicht langsam ist. IE5-IE8

stellt diese Methode jedoch nicht bereit, sodass dieser Selektor im IE recht langsam ist.

4. Die Beziehung zwischen untergeordneten Elementen und übergeordneten Elementen

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

Diese Anweisung bedeutet, dass bei einem gegebenen DOM-Objekt ein untergeordnetes Element daraus ausgewählt wird. jQuery konvertiert diese Anweisung automatisch in $.parent.find('child'),

, was zu einem gewissen Leistungsverlust führt. Es ist 5–10 % langsamer als die schnellste Form.

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

Dies ist die schnellste Aussage. Die Methode .find() ruft die nativen Methoden des Browsers auf (getElementById, getElementByName, getElementByTagName

usw.), sodass sie schneller ist.

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

Diese Anweisung befindet sich in jQuery, Will Verwenden Sie $.sibling() und die Methode nextSibling() von Javascript, um Knoten nacheinander zu durchlaufen. Es ist etwa 50 % langsamer als die schnellste Form.

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

jQuery verwendet intern die Sizzle-Engine . Behandeln Sie verschiedene Selektoren. Die Auswahlreihenfolge der Sizzle-Engine ist von rechts nach links, daher wählt diese Anweisung zuerst .child aus und filtert dann nacheinander das übergeordnete Element #parent heraus

, was dazu führt am schnellsten sein Die Form ist etwa 70 % langsamer.

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

Diese Aussage ist dieselbe wie die vorherige eine Situation. Die vorherige wählt jedoch nur direkte Unterelemente aus, während diese mehrstufige Unterelemente auswählen kann, sodass sie langsamer ist

ist etwa 77 % langsamer als die schnellste Form . .

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

interne jQuery Diese Anweisung wird in $('#parent').find('.child') konvertiert, was 23 % langsamer ist als die schnellste Form.

Die beste Wahl ist also $parent.find('.child'). Da außerdem $parent häufig in der vorherigen Operation generiert wird, wird es von jQuery zwischengespeichert, sodass durch weiteres Hinzufügen von

die Ausführung beschleunigt wird.

Das obige ist der detaillierte Inhalt vonJQ-Optimierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!