Sieben Dinge, die Sie tun müssen, um die Leistung von jQuery_jquery zu verbessern

Tun Sie sieben Dinge, die Ihnen helfen, die Leistung von jQuery zu verbessern. Möchten Sie wissen, welche?

1. Außerhalb von Schleifen anhängen

Alles, was mit dem DOM zu tun hat, hat seinen Preis. Wenn Sie viele Elemente an das DOM anhängen, sollten Sie sie alle auf einmal anhängen, anstatt dies mehrmals zu tun. Ein häufiges Problem tritt beim Anhängen von Elementen an eine Schleife auf.

$.each( myArray, function( i, item ) {

  var newListItem = "<li>" + item + "</li>";
 
 $( "#ballers" ).append( newListItem );
 });

Eine gängige Technik ist die Verwendung von Dokumentfragmenten. Hängen Sie bei jeder Iteration der Schleife das Element an das Fragment anstelle des DOM-Elements an. Wenn die Schleife endet, hängen Sie das Fragment an das DOM-Element an.

var frag = document.createDocumentFragment();

$.each( myArray, function( i, item ) {

  var newListItem = document.createElement( "li" );
  var itemText = document.createTextNode( item );

  newListItem.appendChild( itemText );

  frag.appendChild( newListItem );

});

$( "#ballers" )[ 0 ].appendChild( frag );

Ein weiterer einfacher Trick besteht darin, bei jeder Iteration der Schleife kontinuierlich eine Zeichenfolge zu erstellen. Wenn die Schleife endet, legen Sie den HTML-Code des DOM-Elements auf diese Zeichenfolge fest.

var myHtml = "";

$.each( myArray, function( i, item ) {

  myHtml += "<li>" + item + "</li>";

});

$( "#ballers" ).html( myHtml );

Natürlich gibt es auch andere Techniken, die Sie ausprobieren können. Eine Website namens jsperf bietet eine gute Möglichkeit, diese Eigenschaften zu testen. Auf der Website können Sie jede Technik vergleichen und ihre plattformübergreifenden Leistungsergebnisse visualisieren.

2. Cache-Länge während Schleifen

Greifen Sie in der for-Schleife nicht jedes Mal auf die Längeneigenschaft des Arrays zu.

var myLength = myArray.length;

for ( var i = 0; i < myLength; i++ ) {

  // do stuff

}

3. Elemente abnehmen, um mit ihnen zu arbeiten

Die Manipulation des DOM ist langsam, daher sollten Sie dies mit so wenig Ausrichtung wie möglich tun. Um dieses Problem zu lösen, hat jQuery in Version 1.4 eine Methode namens detach() eingeführt, die es Ihnen ermöglicht, Elemente vom DOM zu trennen, wenn Sie sie bearbeiten.

var $table = $( "#myTable" );
var $parent = $table.parent();

$table.detach();

// ... add lots and lots of rows to table

$parent.append( $table );

Handeln Sie nicht auf fehlende Elemente

Wenn Sie vorhaben, viel Code auf einem leeren Selektor auszuführen, gibt Ihnen jQuery keine Hinweise – es wird weiterhin ausgeführt, als ob keine Fehler aufgetreten wären. Es liegt an Ihnen, zu überprüfen, wie viele Elemente der Selektor enthält.

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();

// Better:
var $mySelection = $( "#nosuchthing" );

if ( $mySelection.length ) {

  $mySelection.slideUp();

}

// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {

  this.length && func.apply( this );

  return this;

}

$( "li.cartitems" ).doOnce(function() {


  // make it ajax! \o/


});

Diese Anleitung ist besonders nützlich für jQuery-UI-Widgets, die viel Overhead erfordern, wenn der Selektor kein Element enthält.

5. Selektoren optimieren

Selektoroptimierung ist nicht mehr so ​​wichtig wie in der Vergangenheit, da viele Browser die Methode document.querySelectorAll() implementieren und jQuery die Last des Selektors auf den Browser verlagert. Dennoch gibt es einige Tipps zu beachten.

ID-basierter Selektor

Es ist immer am besten, Ihren Selektor mit einer ID zu starten.

// Fast:
 $( "#container div.robotarm" );
 
 // Super-fast:
 $( "#container" ).find( "div.robotarm" );

Die Verwendung der Methode .find() ist schneller, da der erste Selektor verarbeitet wurde, ohne die laute Selektor-Engine zu durchlaufen. Nur ID-Selektoren verwenden bereits die Methode document.getElementById(). Die Verarbeitung ist schnell, da sie nativ ist Der Browser.

Spezifität

Beschreiben Sie die rechte Seite des Selektors so detailliert wie möglich und machen Sie für die linke Seite das Gegenteil.

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
 $( ".data td.gonzalez" );

Versuchen Sie, die Form von tag.class zu verwenden, um den Selektor auf der äußersten rechten Seite des Selektors zu beschreiben, und versuchen Sie, auf der linken Seite nur tag oder .class zu verwenden.

Vermeiden Sie eine übermäßige Verwendung von Spezifität

 $( ".data table.attendees td.gonzalez" );
 
 // Better: Drop the middle if possible.
 $( ".data td.gonzalez" );

Die Wahl des „DOM“ trägt immer zur Verbesserung der Selektorleistung bei, da die Selektor-Engine bei der Suche nach Elementen nicht so viele Iterationen durchführen muss.

Vermeiden Sie die Verwendung generischer Selektoren

Die Leistung wird stark beeinträchtigt, wenn ein Selektor explizit oder implizit innerhalb eines undefinierten Bereichs übereinstimmt.

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
 $( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
复制代码
6. Use Stylesheets for Changing CSS on Many Elements

Wenn Sie die .css()-Methode verwenden, um das CSS von mehr als 20 Elementen zu ändern, sollten Sie alternativ das Hinzufügen eines Style-Tags zur Seite in Betracht ziehen. Dies kann die Geschwindigkeit um fast 60 % erhöhen.

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  .appendTo( "head" );

7. Behandeln Sie jQuery nicht als Black Box

Das sind die sieben Dinge, die Sie tun müssen, um die Leistung von jQuery zu verbessern.