Dieser Artikel beschreibt gemeinsame Techniken für JavaScript zur Verbesserung der Leistung. Teilen Sie es für Ihre Referenz wie folgt weiter:
1. Achten Sie auf den Umfang
Mit zunehmender Anzahl der Bereiche in der Bereichskette steigt auch die Zeit, um auf Variablen außerhalb des aktuellen Umfangs zuzugreifen. Der Zugriff auf globale Variablen ist immer langsamer als der Zugriff auf lokale Variablen, da Sie die Bereichskette durchqueren müssen.
1). Es ist immer korrekt, globale Suche zu vermeiden, um globale Objekte zu speichern, die in einer Funktion als lokale Variablen mehrmals verwendet werden.
2). Vermeiden Sie, dass mit einer Aussage mit einem eigenen Bereich den Bereich erstellt und so die Länge der Umfangskette erhöht, in der der Code ausgeführt wird.
2. Wählen Sie die richtige Methode aus
Ein Teil des Leistungsproblems hängt mit dem Algorithmus oder der Methode zusammen, mit der das Problem gelöst werden kann.
1). Vermeiden Sie unnötige Attributsuchungen
In der Informatik wird die Komplexität eines Algorithmus durch das O -Symbol dargestellt. Der einfachste und schnellste Algorithmus ist der konstante Wert, nämlich O (1). Danach wird der Algorithmus immer komplexer und dauert länger, um auszuführen. Gemeinsame JavaScript -Algorithmus -Typen sind:
Konstante: Egal wie viele Werte es gibt, die Ausführungszeit ist konstant. Im Allgemeinen stellt es einen einfachen Wert und den in einer Variablen gespeicherten Wert dar.
Logarithmus: Die Gesamtausführungszeit bezieht sich auf die Anzahl der Werte, aber es ist nicht erforderlich, jeden Wert zu erhalten, um den Algorithmus zu vervollständigen. Zum Beispiel: binäre Suche
Linear: Die Gesamtausführungszeit hängt direkt mit der Anzahl der Werte zusammen. Zum Beispiel: durch alle Elemente in einem Array durchlaufen
Square: Die Gesamtausführungszeit hängt mit der Anzahl der Werte zusammen, und jeder Wert muss mindestens n -mal erreicht werden. Zum Beispiel: Sortier einfügen
Würfel: Die Gesamtausführungszeit hängt mit der Anzahl der Werte zusammen, und jeder Wert muss mindestens Quadrate von n erhalten.
Die Verwendung von Variablen und Arrays ist effizienter als der Zugriff auf Eigenschaften für Objekte. Die Suche nach einem Attribut für ein Objekt dauert länger als der Zugriff auf eine Variable oder ein Array, da eine Eigenschaft mit diesem Namen in der Prototyp -Kette durchsucht werden muss.
Im Allgemeinen muss die Komplexität des Algorithmus so lange wie möglich minimiert werden. Verwenden Sie so viele lokale Variablen wie möglich, um Eigenschaftshowups durch Wertschaten zu ersetzen. Wenn Sie mit digitalisierten Arraypositionen darauf zugreifen oder benannte Attribute (z. B. Nodelist -Objekte) verwenden können, verwenden Sie die Array -Position.
2). Schleife optimieren
A. Immobilien -Iteration In vielen Fällen sind Iteratoren, die vom Maximalwert beginnen und kontinuierlich in der Schleife beeinträchtigen, effizienter.
B. Vereinfachte Terminierungsbedingungen Da jeder Zyklusprozess die Kündigungsbedingung berechnet, muss er so schnell wie möglich gewährleistet werden.
C. Vereinfachter Schleifenkörper Der Schleifenkörper ist am meisten durchgeführt. Stellen Sie daher sicher, dass er in maximalem Maße optimiert ist. Stellen Sie sicher, dass es keine intensiven Berechnungen gibt, die leicht aus der Schleife entfernt werden können.
D. Die am häufigsten verwendeten und während Schleifen in den Post-Test-Schleifen vor dem Test Schleifen sind. Post-Test-Schleifen wie do-während können die anfängliche Beendigung der Berechnung des Zustands und damit schneller vermeiden.
3). Erweitern Sie die Schleife, wenn die Anzahl der Schleifen bestimmt wird, wodurch die Schleife beseitigt und mehrere Funktionsaufrufe häufig schneller sind. Zum Beispiel das berühmte Duff -Gerät
4). Vermeiden Sie doppelte Erklärung
Wenn JavaScript Code JavaScript analysieren möchte, wird es eine doppelte Interpretationsstrafe geben. Das folgende Beispiel:
Eval ("Alert ('Hello World!')"); // Einige Codes bewerten WerteFest:
alarm ('Hallo Welt'); var sayshi = new function ("alert ('Hallo Welt!')");Fest:
var sayshi = function () {alert ("Hellow World!");}; setTimeout ("alert ('Hellow World!'), 500);Fest:
setTimeout (Funktion) ({alert ('Hellow World!');}, 500);5). Andere Methoden
Native Methoden sind schneller - verwenden Sie nach Möglichkeit native Methoden, anstatt selbst einen in JavaScript umzuschreiben. Native Methoden sind in kompilierten Sprachen wie C/C ++ geschrieben, daher sind sie viel schneller als JavaScript. Das am einfachsten vergessene Ding in JavaScript sind die komplexen mathematischen Operationen, die in Mathematikobjekten zu finden sind. Diese Methoden sind viel schneller als jede andere in JavaScript geschriebene Methode wie Sinus und Cosinus.
Switch -Anweisungen sind schneller - Wenn es eine komplexe IF -ELSE -Anweisung gibt, die in eine einzelne Switch -Anweisung konvertiert werden kann, können Sie einen schnelleren Code erhalten. Sie können die Fallanweisungen auch in der wahrscheinlichsten Reihenfolge in der am wenigsten wahrscheinlichen Reihenfolge organisieren, um die Switch -Anweisungen weiter zu optimieren.
Bit -Operatoren sind schneller - wenn mathematische Operationen ausgeführt werden, sind Bit -Operationen schneller als jeder Boolesche oder arithmetische Operationen. Die selektive Umwandlung von Bit -Operationen kann die Leistung komplexer Berechnungen erheblich verbessern. Beispielsweise können Sie, Modulo, Logik und Summenlogik, in Betracht ziehen, sie zu ersetzen.
3.. Minimieren Sie die Anzahl der Aussagen
1). Mehrere variable Deklarationen
wie:
// 4 Aussagen --- Es ist ein Abfall von VaR count = 5; var color = "blau"; var values = [1,2,3]; var nun = new Date ();
Optimierung:
var count = 5, color = "blau", values = [1,2,3], noiw = neues Datum ();
Diese Optimierung ist in den meisten Fällen sehr einfach und viel schneller als eine einzelne Variable -Deklaration getrennt.
2). Iterative Wert einfügen
wie:
var name = values [i]; i ++;
Optimierung:
var name = values [i ++];
3). Verwenden Sie Arrays und Objektliterale
wie:
var values = new array (); ---> var values = [];
var obj = neues Objekt (); ---> var obj = {};
4. Optimieren Sie die DOM -Interaktion
1). Minimieren Sie vor Ort Updates
Sobald Sie auf den DOM -Teil zugreifen müssen, der Teil der angezeigten Seite ist, führen Sie ein Live -Update durch. Der Grund, warum es als Live-Update bezeichnet wird, ist, dass die Seite sofort auf der Anzeige des Benutzers aktualisiert werden muss. Unabhängig davon, ob es sich um einen einzelnen Charakter oder den gesamten Clip entfernt, gibt es eine Leistungsstrafe, da der Browser unzählige Größen neu berechnen muss, um sie zu aktualisieren.
Beispiel:
var list = document.getElementById ("myList"); für (var i = 0; i <10; i ++) {var item = document.createelement ("li"); list.AppendChild (item); item.AppendChild (document.CreateTextNode ("item"+i));}Dies fügt 10 Projekte hinzu, und für diesen Betrieb sind insgesamt 20 Aktualisierungen vor Ort erforderlich. Das Folgende ist die Verbesserung der folgenden Methode zum Erstellen von Dokumentfragmenten:
var list = document.getElementById ("myList"); var fragment = document.createCumentFragment (); für (var i = 0; i <10; i ++) {Fragment.AppendChild (item); item.AppendChild (document.CreateTextNode ("item"+i));} list.appendchlid (Fragment);In diesem Beispiel gibt es nur ein Live -Update, das nach allen Projekten erstellt wird. Das Dokumentfragment wird als vorübergehender Platzhalter verwendet, um das neu erstellte Projekt zu platzieren. Verwenden Sie dann appendChild (), um alle Elemente zur Liste hinzuzufügen. Denken Sie daran, dass beim Übergeben von AppendChild () dem Dokumentfragment nur die untergeordneten Knoten im Fragment hinzugefügt werden und das Fragment selbst nicht hinzugefügt wird.
Sobald Sie das DOM aktualisieren müssen, sollten Sie die Dokumentfragmentierung verwenden, um die DOM -Struktur zu erstellen und sie dann dem vorhandenen Dokument hinzuzufügen.
2). Verwenden Sie Innerhtml
Es gibt zwei Möglichkeiten, Dom -Knoten auf einer Seite zu erstellen: Verwenden von DOM -Methoden wie CreateLement (), appendChild () und Innerhtml für kleine DOM -Änderungen sind beide Methoden in der Effizienz ähnlich. Bei großen DOM -Änderungen ist die Verwendung von InnerHTML viel schneller als die Verwendung von Standard -DOM -Methoden, um dieselbe DOM -Struktur zu erstellen. In ähnlicher Weise ist die Verwendung von Innerhtml gleichzeitig viel schneller als die Verwendung von Innerhtml mehrmals.
3). Verwenden Sie Event Proxy (einfach, weggelassen)
4). Achten Sie auf Nodelist
Das Minimieren der Anzahl der Zugriffe auf Nodelist kann die Skriptleistung erheblich verbessern.
Das Nodelist -Objekt wird zurückgegeben, wenn Folgendes auftritt:
A. Rufen Sie an GetElementsByTagName () an
B. Holen Sie sich das Eigentum von Childnodes des Elements
C. Holen Sie sich die Attribute des Elements
D. Zugriff auf spezielle Sammlungen wie Document.Forms, Document.images usw.
Es ist notwendig zu verstehen, dass bei der Verwendung von Nodelist -Objekten eine vernünftige Verwendung die Ausführungsgeschwindigkeit des Codes erheblich verbessert.
Die zuvor eingeführte Funktion ist ebenfalls ein sehr wichtiger Aspekt. Insbesondere wenn mehrere Schleifen sehr leistungsverbrauch sind, ist diese Methode sehr nützlich.
PS: Für die JavaScript -Komprimierung ist die Reduzierung der Codegröße auch ein effektiver Weg, um die JavaScript -Leistung zu verbessern. Hier sind zwei sehr praktische Komprimierungswerkzeuge:
JavaScript -Komprimierung/Formatierung/Verschlüsselungstools:
http://tools.vevb.com/code/jscompress
JSmin Online JS -Komprimierungstool:
http://tools.vevb.com/code/jsMincompress
Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.