Wie kann die JavaScript-Leistung verbessert werden?

In der heutigen Welt verwendet fast jede Website JavaScript. Webanwendungen werden immer komplexer und benutzerinteraktiver, was zu Leistungsproblemen führt. Dies führt zu einer schlechten Benutzererfahrung, was für jede Webanwendung unerwünscht ist. Verschiedene Faktoren können zu schlechter Leistung, langen Ladezeiten und langen Antwortzeiten führen.

In diesem Tutorial besprechen wir alle diese Faktoren und wie wir dieses Problem lösen und die Leistung von JavaScript verbessern können.

Leichter und kompakter Code

Das erste, was Sie tun können, um die JavaScript-Leistung zu verbessern, besteht darin, leichten, kompakten Code zu schreiben. JavaScript-Code kann mehrere Module und einige nicht verwendete Funktionen oder Variablen enthalten, die leicht aus dem Code entfernt werden können. Dadurch wird die JavaScript-Kompilierungszeit verkürzt, was zu einer besseren Leistung führt. Darüber hinaus kann die Verwendung fortschrittlicher Algorithmen zur Ausführung komplexer Aufgaben sehr hilfreich für die Leistungsverbesserung sein.

Lokale Variablen verwenden

JavaScript greift schneller auf lokale Variablen zu als globale Variablen, sodass die Verwendung lokaler Variablen die JavaScript-Leistung verbessern kann. Immer wenn wir auf eine Variable zugreifen, sucht JavaScript zunächst im lokalen Bereich nach der Variablen und dann nach globalen Variablen. Wenn alle Variablen im lokalen Bereich definiert sind, verkürzt sich die Zugriffszeit. Darüber hinaus werden lokale Variablen nach Abschluss des Funktionsaufrufs zerstört, globale Variablen behalten jedoch ihre Werte im Speicher. Dies kann auch zu Speicherproblemen führen.

// Local variables
const id = 10
let value = 'Tutorialspoint'
// Global variables
var key = 'JavaScript'

DOM-Zugriff reduzieren

Der Zugriff auf das DOM und dessen Manipulation ist eine der wichtigsten Funktionen von JavaScript. Aber zu viele unnötige Zugriffe auf das DOM können zu großen Leistungsproblemen führen. Immer wenn wir ein Element im DOM bearbeiten, wird das DOM mit einem aktualisierten Status aktualisiert. Wenn Sie die DOM-Elemente weiterhin jede Sekunde aktualisieren, wird das DOM jede Sekunde aktualisiert. Daher wird empfohlen, das DOM bei Bedarf zu aktualisieren. Wenn der Benutzer ein Element mehrmals aktualisieren muss, ist es besser, das Elementobjekt in einer Variablen zu speichern und diese Variable zum Aktualisieren des DOM zu verwenden.

let element = document.getElementById('element_id')
element.innerHTML = 'Tutorialspoint'

Reduzieren Sie die Anzahl der Schleifeniterationen

Schleifen sind eine einfache Möglichkeit, sich wiederholende Aufgaben zu erledigen, können aber auch zu einer schlechten Leistung führen. Lange Iterationsschleifen nehmen viel Zeit in Anspruch, daher ist es am besten, die Verwendung langer Schleifen nach Möglichkeit zu vermeiden. Verwenden Sie stattdessen kleine Schleifen und führen Sie minimale Aufgaben innerhalb der Schleife aus. Greifen Sie außerdem nicht in einer Schleife auf das DOM zu. Dies führt zu großen Leistungsproblemen, da Sie das DOM bei jeder Schleifeniteration manipulieren.

let names = ['abc', 'xyz', 'mno', 'pqr'];
let element = document.getElementById('element_id');
// DON’T DO THIS
for(let index=0; i<names.length; i++){
   element.innerHTML += names[index] + ' ';
}
// DO THIS
let str = '';
for(let index=0; i<names.length; i++){
   str += names[index];
}
element.innerHTML = str;

Verwenden Sie asynchrone Programmierung

Asynchrone Programmierung ist eine der besten Möglichkeiten, die Leistung von Webanwendungen zu verbessern. Bei der asynchronen Programmierung erfolgt die Codeausführung asynchron, sodass mehrere Aufgaben gleichzeitig ausgeführt werden können. Dies führt zu einem schnellen Laden der Daten und einer schnellen Reaktion. In JavaScript werden asynchrone Operationen von AJAX ausgeführt, was für Asynchronous Javascript and XML steht.

let http = new XMLHttpRequest()
http.open('GET', '...URL')
http.onload = function(){
   console.log(this.response); // the response
}

Fügen Sie JavaScript unten auf der Seite ein

Wenn JavaScript oben auf der Seite platziert wird, wird es beim Laden der Seite ausgeführt, sodass das Laden der gesamten Seite etwas länger dauert. Dies führt dazu, dass Seiten langsam geladen werden. Um dieses Problem zu lösen, sollte JavaScript am Ende der Seite platziert werden, sodass die Ausführung von JavaScript beginnt, nachdem die gesamte Seite geladen ist.

Beispiel

<html>
<body>
   <div>Your Page Content</div>
   <div id='element'></div>
   <script>
      // JavaScript Code at Page's Bottom
      document.getElementById('element').innerHTML = 'Welcome to
      Tutorialspoint'
   </script>
</body>
</html>

Beseitigen Sie Speicherlecks

Wenn eine Webanwendung einen Speicherverlust aufweist, weist die Anwendung immer mehr Speicher zu, was zu enormen Leistungs- und Speicherproblemen führt. Um dieses Problem zu beheben, stellen Sie sicher, dass in Ihrer Anwendung keine Speicherlecks vorliegen, und prüfen Sie, ob Variablen nicht zu viele Werte annehmen. Benutzer können Speicherlecks in Chrome-Entwicklungstools beobachten.

Optimierungsalgorithmus verwenden

Komplexe Aufgaben in JavaScript nehmen im Allgemeinen viel Zeit in Anspruch, was zu Leistungsproblemen führen kann. Mithilfe optimierter Algorithmen können wir die für die Ausführung von Aufgaben erforderliche Zeit reduzieren. Schreiben Sie den Algorithmus optimierter um, um die besten Ergebnisse zu erzielen. Vermeiden Sie außerdem die Verwendung langer Schleifen, rekursiver Aufrufe und globaler Variablen.

Variablen erstellen und verwenden

Erstellen Sie in JavaScript nur Variablen, die Sie verwenden und deren Werte Sie speichern. Verwenden Sie Folgendes und vermeiden Sie unnötige Codezeilen und Variablendeklarationen -

document.write(num.copyWithin(2,0));

Vermeiden Sie die Verwendung mit

with Schlüsselwort hat keinen guten Einfluss auf die JavaScript-Geschwindigkeit. Vermeiden Sie die Verwendung in Ihrem Code.

Schnellere Schleifen

Wenn Sie Schleifen verwenden, halten Sie Zuweisungen außerhalb der Schleife. Dadurch wird die Schleife schneller -

var i;
// assignment outside the loop
var j = arr.length;
for (i = 0; i < j; i++) {
   // code
}

Verwenden Sie andere Tools, um Probleme zu finden

Ihre Webanwendung scheint einwandfrei zu funktionieren, es kann jedoch zu Leistungsproblemen kommen. Um diese Probleme zu identifizieren, können einige Tools hilfreich sein. Lighthouse ist ein nützliches Tool zur Leistungsanalyse von Webanwendungen. Es hilft bei der Überprüfung von Leistung, Best Practices, Zugänglichkeit und SEO. Es gibt nicht nur dieses Tool, sondern auch andere Tools im Internet, mit denen sich die Leistung von Webanwendungen überprüfen lässt und wir einfach die Probleme erkennen und versuchen können, sie zu beheben.

Das obige ist der detaillierte Inhalt vonWie kann die JavaScript-Leistung verbessert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!