Einführung
jQuery gilt als die am weitesten verbreitete leichte Javascript-Bibliothek im Bereich der Webentwicklung. Nicht nur professionelle Webentwickler verwenden sie, sondern auch viele neue Webentwickler oder Web-Enthusiasten haben sich mithilfe der jQuery-Entwicklung problemlos integriert .
Und wenn Sie darin besser werden wollen, sollten Sie Best Practices lernen und verstehen. Best Practice sind Informationen über die neuesten Technologien und Entwicklungsmethoden, die sich mit der Entwicklung eines bestimmten technischen Bereichs etablieren. Sie sind auch im Bereich der Webentwicklung sehr nützlich.
Der Inhalt dieses Artikels bezieht sich auf die jQuery-Performance-TIPPS und -Tricks des herausragenden Front-End-Ingenieurs Addy Osmani. Wenn Sie interessiert sind, können Sie sich auch selbst die Rede von Addy Osmani ansehen Das Kernteam von jQuery (jQuery Core Teams) ist eines der Mitglieder.
Warum Sie die Best Practices von jQuery befolgen müssen
Das Streben nach Leistung im Bereich Webentwicklung wird niemals aufhören. Obwohl jQuery ein sehr leistungsfähiges Entwicklungstool ist, führt eine unsachgemäße Verwendung dennoch zu zusätzlicher Arbeit und Belastung für den Browser und führt außerdem dazu, dass die entwickelte Webanwendung mehr Systemressourcen beansprucht und langsamer läuft. Und wir alle wissen, dass eine gute Webanwendung frisch und flexibel sein muss.
Wie beurteilt man die Leistung von Javascript? Nun kann diese Art von Leistungstest als Laufgeschwindigkeit zusammengefasst werden: Wenn eine bestimmte Schreibmethode für dieselbe Funktion schneller ausgeführt wird als eine andere Schreibmethode, kann diese Schreibmethode eine bessere Leistung erzielen. Dies wird natürlich nur unter Performance-Gesichtspunkten betrachtet und umfasst nicht die Wartbarkeit des Codes. Wenn Sie die Leistung verschiedener JavaScript-Codefragmente selbst testen möchten, wird die Verwendung von jsPerf.com empfohlen. Diese Website kann Ihnen dabei helfen, ganz einfach JavaScript-Leistungstestfälle zu erstellen und Testergebnisse zu speichern und zu teilen. Das jQuery-Team verwendet es auch für JavaScript-Leistungstests.
jQuery-Verwendungsvorschläge
1. Verwenden Sie die neueste Version
Die von der neuen Version von jQuery bereitgestellte API wird die Leistung verbessern und einige bestehende Fehler beheben. Da viele Websites jQuery verwenden, werden Änderungen an jeder neuen Version von jQuery sehr strengen Tests unterzogen und Upgrades verursachen im Allgemeinen keine Probleme.
Darüber hinaus kann die neue Version von jQuery sehr nützliche Änderungen an der API vornehmen, um die Entwicklungsarbeit zu erleichtern. Vor jQuery 1.7 wurden beispielsweise für die Ereignisbindung die Methoden bind(), delegate() und live() verwendet. Obwohl es sich bei allen um Ereignisbindungen handelt, hat jede Methode ihren eigenen Zweck, was zu der Frage führt: „Wann sollte ich welche verwenden?“ Ab jQuery 1.7 werden zwei neue Methoden, on() und off(), hinzugefügt und empfohlen, um die gesamte Ereignisbindung und -entfernung abzuschließen, was das Verständnis erheblich erleichtert.
2. Verstehen Sie Ihre Selektoren
In jQuery sind nicht alle Selektoren (Selektoren) gleich leistungsfähig. Mit anderen Worten: Obwohl Sie bestimmte Elemente mit vielen verschiedenen Schreibmethoden für Selektoren auswählen können, denken Sie nicht, dass sie auch hinsichtlich der Leistung gleich sind.
Die Selektoren von jQuery laufen mit unterschiedlichen Geschwindigkeiten, von der schnellsten bis zur langsamsten:
Da die vom Browser unterstützten nativen DOM-Operationsmethoden (z. B. document.getElementById()) verfügbar sind, sind der ID-Selektor und der Elementselektor am schnellsten. Der etwas langsamere Klassenselektor liegt daran, dass IE6-IE8 die native Methode getElementsByClassName() nicht unterstützt. In anderen modernen Browsern, die diese native Methode unterstützen, ist der Klassenselektor jedoch immer noch sehr schnell.
Die langsamsten Pseudoklassen und Attributselektoren liegen daran, dass der Browser keine verfügbaren nativen Methoden für die entsprechenden Funktionen bereitstellt. Obwohl jQuery versucht hat, mit querySelector() und querySelectorAll(), zwei nativen Selektor-APIs (die zur CSS-Abfrage-API gehören), die Leistung einiger jQuery-Selektoren in einigen modernen Browsern zu verbessern, sind sie insgesamt immer noch relativ langsam. Dies liegt natürlich auch daran, dass jQuery höhere API-Anforderungen für Pseudoklassen und Attributselektoren stellt. Es muss nicht nur input[type="text"], einen zulässigen Selektor in CSS, unterstützen, sondern auch p:first für Elemente , ist aber ein illegaler Selektor in CSS. Kurz gesagt, die Pseudoklassen und Attributselektoren von jQuery sind sehr leistungsfähig, aber bitte verwenden Sie sie mit Vorsicht.
3. Zwischenspeichern Sie die von Ihnen betriebenen Elemente
var parents = $('.parents');
var children = $('.parents').find('.child'); //bad
Caching bezieht sich auf das Speichern der Rückgabeergebnisse von jQuery-Selektoren, damit sie später erneut aufgerufen werden können. Jedes $('.whatever') durchsucht das DOM erneut und gibt eine jQuery-Sammlung zurück, sodass eine Wiederverwendung vermieden wird.
In nativem JavaScript ist die Einrichtung lokaler Variablen zum Zwischenspeichern von Daten oder Objekten von Vorteil, um den Code zu optimieren und die Leistung zu optimieren. Hier gilt das gleiche Prinzip.
4.Chain-Syntax
var parents = $('.parents').doSomething().doSomethingElse();
jQuery中大部分方法都返回jQuery包装集并支持这种链式语法。javasript的性能优化要点之一是最小化语句数，因此链式语法不仅写起来更容易，运行起来也会更快。
5.使用事件代理
利用事件冒泡，指定一个位于dom较高层级的元素（比如document）的事件处理程序，就可以管理某一类型的所有事件。减少了页面中添加的事件处理程序，自然可以提升整体性能。
6.最小化现场更新
如果你进行操作的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。现场更新需要浏览器重新计算尺寸，涉及到重绘（repaint）和回流（reflow），有较高的性能花费，因此应减少使用。
在新增内容时，建议先把要新增的代码段合并完全，最后再使用单个append()方法添加到页面。而如果元素存在复杂的交互，比如反复地添加和移除，detach()这个针对性的方法就是最佳的选择。
7.不在不必要的时候使用jQuery方法
$('.nav_link').bind('click', function() {
console.log('nav id: ' + $(this).attr('id')); //bad
$.data(elem, key, value); //significantly faster
};
jQuery方法不一定是最好的方法。这里使用$(this).attr('id')获取当前事件元素的ID，为当前事件元素创建了jQuery包装集，然后调用attr()属性获取方法。但这都是额外的性能花费。事实上，this在事件函数内就表示当前事件元素，直接使用this.id就可以获取元素ID，这种原生DOM属性的写法要更快。
8.适当使用jQuery工具函数
操作jQuery包装集的方法（也就是写在$.fn中的方法），其中一部分也有作为jQuery工具函数（直接写在$中的方法）的同类方法。由于jQuery工具函数在使用中不涉及创建jQuery包装集，因此，在部分情况下，可以通过换用jQuery工具函数提升性能。
比如，在DOM中存储数据，一般的做法是：
$('#elem').data(key, value); //common way
但改为下边的写法会快很多：
需要的注意的是，虽然下面这种方法更快，但作为参数传入的元素不能用选择符，而要用元素本身。
结语
我自己整理和写本文内容时，也感觉很有收获。jQuery是一个很强大的工具，但进一步说，也只提供了web开发的最基本的内容，更高级更复杂的内容，还需要自己不断学习和创作。在这个过程中，遵循最佳实践，养成良好的习惯，会有很大的益处，并逐渐做得更出色！
