Detaillierte Anleitung zur Codeoptimierung in jQuery

Dieser Artikel fasst die Optimierungsmethoden für jQuery-Code für alle zusammen. Wenn Sie Bedarf in diesem Bereich haben, lassen Sie uns gemeinsam lernen.

Verwenden Sie den richtigen Selektor

In jQuery können Sie mehrere Selektoren verwenden, um dasselbe Webseitenelement auszuwählen. Die Leistung jedes Selektors ist unterschiedlich, und Sie sollten ihre Leistungsunterschiede verstehen

1 Der schnellste Selektor: ID-Selektor und Element-Label-Selektor

Zum Beispiel die folgenden Anweisungen mit der besten Leistung :

$('#id')
$('form')
$('input')

Wenn jQuery auf diese Selektoren stößt, ruft jQuery automatisch die nativen Methoden des Browsers auf (z. B. getElementById()), sodass sie schnell ausgeführt werden.

2. Langsamerer Selektor: Die Leistung des Klassenselektors

$('.className') hängt von verschiedenen Browsern ab. Die Browser Firefox, Safari, Chrome und Opera verfügen alle über die native Methode getElementByClassName(), sodass die Geschwindigkeit nicht langsam ist. IE5-IE8 haben diese Methode jedoch nicht bereitgestellt, daher ist dieser Selektor im IE ziemlich langsam.

3 Der langsamste Selektor: Pseudoklassenselektor und Attributselektor

Suchen, um alle versteckten Elemente zu entfernen Für Elemente auf einer Webseite müssen Sie einen Pseudoklassenselektor verwenden:

$(':hidden')

Ein Beispiel für einen Attributselektor ist:

$('[attribute=value]')

Diese beiden Anweisungen sind am langsamsten, da das Durchsuchen nicht nativ ist Methoden für sie. Einige neue Browserversionen haben jedoch die Methoden querySelector() und querySelectorAll() hinzugefügt, wodurch die Leistung dieses Selektortyps erheblich verbessert wird.

Verstehen Sie die Eltern-Kind-Beziehung

Die folgenden sechs Alle Selektoren wählen untergeordnete Elemente aus übergeordneten Elementen aus

$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))

1. Die folgende Anweisung bedeutet, dass bei gegebenem 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

$('.child', $parent)

2. Die Methode .find() ruft die nativen Methoden des Browsers auf (getElementById, getElementByName, getElementByTagName usw.), sodass sie schneller ist

$parent.find('.child')

3 Diese Anweisung verwendet $.sibling() und nextSibling() von JavaScript. Die Methode durchläuft die Knoten einzeln. Es ist etwa 50 % langsamer als die schnellste Form

$parent.children('.child')

4. jQuery verwendet intern die Sizzle-Engine, um verschiedene Selektoren zu verarbeiten. 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, wodurch es etwa 70 % langsamer ist als die schnellste Form

$('#parent > .child')

Diese Aussage ist die gleiche wie die vorherige. Das vorherige wählt jedoch nur direkte Unterelemente aus, während dieses mehrstufige Unterelemente auswählen kann, sodass es langsamer ist, etwa 77 % langsamer als die schnellste Form

$('#parent .child')

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

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

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, wodurch die Ausführungsgeschwindigkeit weiter beschleunigt wird.

Verwenden Sie jQuery nicht zu oft.

Egal wie schnell jQuery ist, es kann nicht konkurrieren mit den nativen Methoden im Vergleich zu Javascript. Versuchen Sie daher, die Verwendung von jQuery zu vermeiden, wenn native Methoden verwendet werden können.

Nehmen wir den einfachsten Selektor als Beispiel: document.getElementById("foo") ist mehr als zehnmal schneller als $("#foo")

Sehen wir uns ein anderes Beispiel an ein Element Binden Sie eine Funktion, die Klickereignisse verarbeitet:

$('a').click(function(){
　　　　alert($(this).attr('id'));
　　});

Dieser Code bedeutet, dass nach dem Klicken auf ein Element das ID-Attribut des Elements angezeigt wird. Um dieses Attribut zu erhalten, muss jQuery zweimal hintereinander aufgerufen werden, der erste ist $(this) und der zweite ist attr('id').

Tatsächlich ist diese Verarbeitung völlig unnötig. Die korrektere Art, es zu schreiben, besteht darin, this.id direkt mit der nativen JavaScript-Methode aufzurufen:

$('a').click(function(){
　　　　alert(this.id);
　　});

Tests zufolge ist die Geschwindigkeit von this.id mehr als 20-mal schneller als die von $(this). attr('id')

Gut zwischenspeichern

Die Auswahl eines bestimmten Webseitenelements ist ein teurer Schritt. Daher sollten Sie den Selektor so selten wie möglich verwenden und die ausgewählten Ergebnisse so weit wie möglich zwischenspeichern, um sie in der Zukunft wiederholt verwenden zu können.

Zum Beispiel ist die folgende Schreibweise schlecht:

jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');

Eine bessere Schreibweise ist:

var cached = jQuery('#top');
　　cached.find('p.classA');
　　cached.find('p.classB');

Laut Tests ist das Caching 2-3 mal schneller als kein Caching. Zeiten

Ein Hauptmerkmal von jQuery ist, dass es die Verwendung von Kettenschreiben ermöglicht

$('p').find('h3').eq(2).html('Hello');

Wenn Kettenschreiben verwendet wird, speichert jQuery automatisch die Ergebnisse jedes Schritts, sodass es schneller ist als Nicht-Ketten-Schreiben. Tests zufolge ist die Kettenschreibmethode etwa 25 % schneller als die Nicht-Kettenschreibmethode (ohne Caching)

Ereignisdelegation

Das Ereignismodell von Javascript übernimmt den „Bubble“-Modus, auch That Das heißt, Ereignisse auf untergeordneten Elementen „sprudeln“ eine Ebene nach oben und werden zu Ereignissen auf dem übergeordneten Element.

Damit kann die Ereignisbindung erheblich vereinfacht werden. Es gibt beispielsweise eine Tabelle (Tabellenelement) mit 100 Zellen (td-Element). Jetzt muss an jede Zelle ein Klickereignis (Klick) gebunden werden. Müssen Sie den folgenden Befehl 100 Mal ausführen?

$("td").on("click", function(){
　　　　$(this).toggleClass("click");
　　});

Die Antwort ist nein, wir müssen dieses Ereignis nur an das Tabellenelement binden, denn nachdem ein Klickereignis auf dem td-Element auftritt, „blubbert“ das Ereignis in die Tabelle des übergeordneten Elements und wird dadurch überwacht

因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件

$("table").on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});

更好的写法，则是把事件绑定在document对象上面

$(document).on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});

如果要取消事件的绑定，就使用off()方法

$(document).off("click", "td");

少改动DOM

1、改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法

如果要插入多个元素，就先把它们合并，然后再一次性插入。根据测试，合并插入比不合并插入，快了将近10倍

2、如果要对一个DOM元素进行大量处理，应该先用.detach()方法，把这个元素从DOM中取出来，处理完毕以后，再重新插回文档。根据测试，使用.detach()方法比不使用时，快了60%

3、如果要在DOM元素上储存数据，不要写成下面这样：

var elem = $('#elem');
elem.data(key,value);

而要写成

var elem = $('#elem');
$.data(elem[0],key,value);

根据测试，后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多

4、插入html代码的时候，浏览器原生的innterHTML()方法比jQuery对象的html()更快

尽量少生成jQuery对象

每当使用一次选择器（比如$('#id')），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象

举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法

既可以使用针对jQuery对象的版本：

var $text = $("#text");
var $ts = $text.text();

也可以使用针对jQuery函数的版本：

var $text = $("#text");
var $ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快

选择作用域链最短的方法

严格地说，这一条原则对所有Javascript编程都适用，而不仅仅针对jQuery

我们知道，Javascript的变量采用链式作用域。读取变量的时候，先在当前作用域寻找该变量，如果找不到，就前往上一层的作用域寻找该变量。这样的设计，使得读取局部变量比读取全局变量快得多

请看下面两段代码，第一段代码是读取全局变量：

var a = 0;
　　function x(){
　　　　a += 1;
　　}

第二段代码是读取局部变量：

function y(){
　　　　var a = 0;
　　　　a += 1;
　　}

第二段代码读取变量a的时候，不用前往上一层作用域，所以要比第一段代码快五六倍

同理，在调用对象方法的时候，closure模式要比prototype模式更快

prototype模式：

var X = function(name){ this.name = name; }
X.prototype.get_name = function() { return this.name; };

closure模式：

var Y = function(name) {
　　　　var y = { name: name };
　　　　return { 'get_name': function() { return y.name; } };
　　};

同样是get_name()方法，closure模式更快

使用Pub/Sub模式管理事件

当发生某个事件后，如果要连续执行多个操作，最好不要写成下面这样：

function doSomthing{
　　　　doSomethingElse();
　　　　doOneMoreThing();
　　}

而要改用事件触发的形式：

function doSomething{
　　　　$.trigger("DO_SOMETHING_DONE");
　　}
　　$(document).on("DO_SOMETHING_DONE", function(){
　　　　doSomethingElse(); 
  });

还可以考虑使用deferred对象

function doSomething(){
　　　　var dfd = new $.Deferred();
　　　　//Do something async, then... 
　　　　//dfd.resolve();
　　　　return dfd.promise();
　　}
　　function doSomethingElse(){
　　　　$.when(doSomething()).then(//The next thing);
　　}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在微信小程序中如何使用switch开关选择器

在JavaScript中如何计算多边形质心

在Angular19中有关自定义表单控件使用

Das obige ist der detaillierte Inhalt vonDetaillierte Anleitung zur Codeoptimierung in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!