Wichtige JavaScript-Konzepte für schnellere Webseiten

Während die meisten von uns heutzutage React- oder anderen High-Level-TypeScript-Code schreiben, gibt es immer noch Zeiten, in denen man sich in den dunklen Unterbereich der F12-Konsole und der JavaScript-Laufzeit im Browser wagen muss.

In diesem Artikel werde ich einige Schlüsselkonzepte behandeln, die Sie verstehen müssen und die Ihnen dabei helfen können und höchstwahrscheinlich auch werden, viel schnellere Seiten zu erstellen.

1) ? Ereignisschleife

JavaScript ist Single-Threaded, was bedeutet, dass die Sprache selbst jeweils nur eine Aufgabe ausführen kann. Um diese Einschränkung zu umgehen, bieten Browser einen „Ereignisschleifen“-Mechanismus.

Wenn Sie beispielsweise die Funktion „setInterval“ verwenden, verwaltet der Browser einen Timer im Hintergrund und wenn das Intervall abgelaufen ist, wird die Rückruffunktion in die Ereignisschleife verschoben.

Mittlerweile wird jeder JavaScript-Code, der keine asynchrone Browser-API verwendet, einfach von oben nach unten nacheinander ausgeführt. Wenn der Hauptthread keine Arbeit verrichtet, ruft der Browser eine Aufgabe aus der Ereignisschleife ab und führt sie aus.

2) ? Hintergrundarbeiter

Wenn Sie es mit intensiven Vorgängen zu tun haben, deren Ausführung lange dauert, beispielsweise 500 ms, sollten Sie dies auf keinen Fall im Hauptthread ausführen, da dies die Benutzeroberfläche träge machen würde.

Hier kommen Web-Worker zum Einsatz; Web-Worker werden in einem vom Hauptbrowser-Thread getrennten Thread ausgeführt, sodass hier ausgeführte Aufgaben keinen Einfluss auf die Ladegeschwindigkeit Ihrer Seite haben.

Ein guter Anwendungsfall wäre zum Beispiel: Wenn Sie Zeitreihendaten für komplexe Diagramme haben, die Tausende von Datensätzen enthalten, die analysiert und Berechnungen durchgeführt werden sollen. Sie können einfach einen Loader anzeigen und die Diagrammberechnungen in einem Web-Worker durchführen und dann das DOM aktualisieren, sobald es fertig ist.

3) ⏸️ Verzögern Sie Unwesentliches

Da JavaScript Single-Threaded ist, sollten Sie so viel wie möglich verzögern, um Ihren Haupt-Thread freizugeben. Der beste Ausgangspunkt sind daher die wichtigsten Web-Vitaldaten, wichtige SEO-Kennzahlen, die Ihnen dabei helfen, langsamen Code zu identifizieren, der verzögert werden kann.

Sie können dann Ereignis-Listener wie Scrollen, Laden, DOMContentLoaded usw. verwenden, um die Ausführung von Code zu verzögern.

Normalerweise wird dies verwendet, um die Seitenverfolgung zu verzögern, Widgets unterhalb der Falte zu laden, Diagramme zu laden und andere API-Aufrufe durchzuführen, die unterhalb der Hauptfalte liegen.

Beispiel:

document.addEventListener('DOMContentLoaded',function() {
 // Slow code here.
});

ℹ️ DOMContentLoaded: wartet darauf, dass das gesamte HTML-Dokument zuerst analysiert wird, einschließlich nicht asynchroner JS-Skripte, wartet jedoch nicht auf externe Ressourcen wie Bilder, CSS-Dateien, Iframes usw. Das „load“-Ereignis ist ähnlich, außer dass es darauf wartet, dass alles geladen wird, einschließlich CSS, Iframes und Bilder.

Eine weitere praktische Web-API ist der Intersection Observer. Dies ermöglicht es Ihnen, Code basierend auf der Sichtbarkeit von Elementen auszulösen, was sehr nützlich ist, um API-Aufrufe zu minimieren, wenn der Benutzer über ein bestimmtes DOM-Element hinaus scrollt (denken Sie an unendliche Paginierung).

4) ?️ OffscreenCanvas

Ähnlich wie Web-Worker können Sie intensive Canvas-bezogene Vorgänge als Hintergrundaufgabe in ihren eigenen Thread verschieben, indem Sie eine Browser-API namens „OffscreenCanvas“ verwenden.

Dies ist nützlich für Echtzeitvisualisierungen, Bildbearbeitung, Spiele, Videobearbeitung usw.

5) ⏳ Führen Sie Aufgaben aus, wenn der Browser nicht ausgelastet ist

Sehr ähnlich der Ereignisschleife, außer dass Aufgaben, die mit „requestIdleCallback“ ausgeführt werden, eine sehr niedrige Priorität haben und daher nur ausgeführt werden, wenn der Browser inaktiv ist.

Dies ist ideal für die Ausführung unkritischer Aufgaben wie Protokollierung und Caching für den Offline-Zugriff in einer PWA.

? MDN-Webdokumente [Bonus – hilfreiche Ressource]

https://developer.mozilla.org/en-US/
Ich weiß, dass Sie dafür wahrscheinlich Claude oder ein LLM verwenden, aber KI-Halluzinationen sind ein Problem und liefern Ihnen manchmal falsche Informationen. Daher ist es immer schön, ein solides schriftliches Nachschlagewerk zu haben, dem Sie vertrauen können.

MDN ist Open Source und wird von Mozilla verwaltet. Es ist zweifellos die beste Webressource, um mehr über die verschiedenen JavaScript-, CSS- und HTML-Browser-APIs zu erfahren. Ich habe dies im Laufe meiner Karriere häufig genutzt und tue es auch heute noch.

PS: Ausführlichere Webentwicklungs-, KI- und Linux-Tutorials und Anleitungen finden Sie in meinem Blog unter: KevinCoder

Das obige ist der detaillierte Inhalt vonWichtige JavaScript-Konzepte für schnellere Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!