So beschleunigen Sie die Ausführung des JavaScript -Code

Bei der Entwicklung einer App oder einer Website ist eines der wichtigsten Elemente, die zu berücksichtigen sind, die Leistung der App oder der Website. Als Benutzer möchte ich nicht. Wenn die Webseite häufig 5-6 Sekunden dauert, um die meisten Benutzer einschließlich mir zu laden.

Für Webentwickler ist JavaScript ein fantastisches Tool. Jeder Webentwickler lernte JavaScript irgendwann in seinem Leben. Der schlechte Javascript -Code führt jedoch zu langsameren Websites.

In diesem Sinne befasst sich ein Entwickler immer nach Möglichkeiten, seine Webseite zu verbessern. Sie haben Glück, weil wir heute darüber sprechen, wie Sie die Ausführung des JavaScript -Codes beschleunigen können.

Aktivitäten Reduzierung der Schleifen

Ein Programmierer verwendet oft Schleifen, um seinen Code zu verkürzen. Es sollte jedoch beachtet werden, dass es einige schlechte Möglichkeiten gibt, Schleifen zu verwenden, die Ihr Programm langsamer machen.

Nehmen wir ein Beispiel für Schleifen.

Beispiel:

Diese Schleife ist programmatisch richtig, aber seine Leistung wird schlecht sein. Wir können den MyArray platzieren.Längenanweisung außerhalb der Schleife, damit sie die Länge nicht immer wieder berechnen muss, bis die Schleife endet.

Lösung:

Lass Len = myarray.Länge;
für (lass i = 0; i < len; i++)
//Hallo

In dieser Schleife können wir sehen, dass die Länge festgelegt ist und die Schleife nicht jedes Mal, wenn es iteriert, die Länge eines Arrays berechnen muss. Daher nimmt die Geschwindigkeit zu, ebenso wie die Leistung.

DOM -Zugriffsreduzierung

Wenn wir die JavaScript -Anweisung mit dem Zugriff auf HTML DOM vergleichen, werden wir feststellen, dass der Zugriff auf HTML DOM sehr langsam ist. Dies ist kein Problem, wenn wir nicht auf viele DOM -Operationen zugreifen oder viele DOM -Operationen ausführen. Wenn Sie jedoch viele DOM -Vorgänge ausführen, wirkt sich dies auf die Geschwindigkeit der Webseite aus.

Die Lösung hierfür besteht darin, das DOM -Element in einer lokalen Variablen zu speichern, und dann können wir auf diese mehrmals zugreifen.

Zum Beispiel:

const myobj = dokument.GetElementById ("Geschwindigkeit"), innerhtml = "nicht erreicht";
const myobj = dokument.GetElementById ("Geschwindigkeit").versteckt = "falsch";
// langsam und behindert die Geschwindigkeit

Dies führt dazu, dass unser Programm ineffizient ausgeführt wird.

Schauen wir uns ein anderes Beispiel an, das dieses Problem angeht.

const myobj = dokument.GetElementById ("Geschwindigkeit");
Myobj.innerHtml = "erreicht";
Myobj.versteckt = "falsch";

Nachdem wir uns die DOM -Zugriffsreduzierung angesehen haben, leuchten wir das Licht auf die DOM -Größe, um die Geschwindigkeit unserer Webseite in JavaScript zu verbessern.

DOM -Größe Reduktion

Bevor wir uns mit der Reduzierung der DOM -Größe befassen, schauen wir uns eine übermäßige DOM -Größe an, was bedeutet, dass Ihre Seite zu viele DOM -Knoten/HTML -Komponenten enthält, wenn die DOM -Größe zu groß ist. Es kann auch bedeuten, dass Ihre Seitendom -Elemente tief verschachtelt sind. Dies führt zum Verbrauch von mehr Leistung, wodurch die Seitenleistung oder Geschwindigkeit verringert wird.

Die Lösung ist, dass die Anzahl der Elemente im HTML -DOM minimiert werden sollte. Der Vorteil davon besteht. Es ist sehr praktisch, besonders auf kleineren Geräten wie Mobiltelefonen usw.

Beseitigung unnötiger Variablen

Dies ist der einfachste Trick, um Ihre Webseite zu verbessern. Warum Variablen machen, wenn sie nicht benötigt werden?? Warum sollten Sie Variablen erstellen, in denen Sie wissen, dass Sie es nur verwenden, um es irgendwo anzeigen? Wenn wir vermeiden, unnötige Variablen zu machen, steigt unsere Leistung auf der Webseiten an.

Zum Beispiel schlechter Code:

lass firstname = "jhon";
lass nachname = "cena";
Lassen Sie FullName = FirstName+""+LastName;
Alarm (Vollname);

In diesem Beispiel können wir sehen, dass wir den FirstName und den Nachnamen in Fullname speichern, um ihn in einer Warnung anzuzeigen. Wäre es nicht besser, den FirstName und Lastname direkt zu alarmieren? Dies ist es, was unnötige Variablen beseitigt.

Lösung (guter Code):

lass firstname = "jhon";
lass nachname = "cena";
alert (FirstName+""+LastName);

Verzögern Sie die Belastung von JavaScript

Um Ihre Webseitenleistung in JavaScript zu verbessern, ist es eine übliche Praxis, ein Skript -Tag oder in das Skript -Tag des JavaScript -Codes am Ende der HTML -Seite zu setzen. Der Hauptzweck ist, dass der Browser zuerst die HTML und dann den JavaScript -Code laden sollte. Um es in technischer Hinsicht auszudrücken, während ein Skript heruntergeladen wird, wird der Browser keine anderen Downloads initiiert und alle Parsen und Rendering werden blockiert.

In unserem Skript -Tag können wir auch "Defer =" true "" verwenden. Die Funktion des Defer -Attributs ist, dass es angibt, dass das Skript nur ausgeführt werden sollte, sobald die Seite abgeschlossen ist. Mit anderen Worten, es wartet, bis der gesamte Dom geladen ist. Es ist jedoch zu beachten, dass es nur mit externen Skripten kompatibel ist.

Beispiel:

Vermeiden Sie das Schlüsselwort "mit" mit dem Schlüsselwort "mit"

Mit Schlüsselwort wird verwendet, um die Eigenschaften oder Methoden eines Objekts zu verweisen, da es sich um eine Art Kurzform handelt. Die Verwendung des Schlüsselworts "mit" verlangsamt die Geschwindigkeit. Der andere Grund, das With -Keyword nicht zu verwenden.

JavaScriptcode minifieren

Das Minimieren oder Minimieren von JavaScript -Code ist eine weitere Methode zur Beschleunigung der Ausführung unseres JavaScript -Code. Das Minimieren von JavaScript -Code bedeutet einfach, alle unerwünschten und unnötigen Zeichen im JavaScript -Quellcode zu entfernen oder zu ändern, ohne die Funktionalität des Programms zu ändern. Es enthält mehrere Dinge wie das Entfernen von Kommentaren, Semikolons sowie Whitespaces. Abgesehen davon beinhaltet es auch die Verwendung von kurzen Funktionen und Variablennamen. Lassen Sie uns ein Beispiel vor und nach der Minifikation unseres Codes sehen:

Vor dem Minimieren:

//die Funktion
// Welches Konsolenprotokoll
// Die erste Nachricht von der Person
Funktion FirstMessage (Name)
Konsole.log ("Erste Nachricht ist von:", Name);

// nun die Funktion aufrufen
FirstMessage ("John");

Nach dem Minimieren:

Funktion fmsg (n) Konsole.log ("Erste Nachricht ist von:", n) FirstMessage ("John");

Abschluss

Ein Entwickler behält immer das Gleichgewicht zwischen der Zuverlässigkeit und der Optimierung des Codes bei. Aus diesem Grund haben wir besprochen, wie die Ausführung des JavaScript -Code in diesem Artikel beschleunigt werden kann. Alle oben genannten Tipps und Tricks, die bei zusammen verwendet werden, haben eine signifikante Verbesserung der Geschwindigkeit des JavaScript -Code. Man sollte jedoch bedenken, dass die Leistung zwar nicht über dem Erkennung von Fehlern oder dem Hinzufügen von Funktionen ist.