Thema zur JavaScript-Optimierung: Laden und Ausführen, Laden und Ausführen_Javascript-Fähigkeiten-js-Tutorial-php.cn

Die Leistung von JavaScript in Browsern kann als das wichtigste Usability-Problem angesehen werden, mit dem Entwickler konfrontiert sind. Dieses Problem wird durch die blockierende Natur von JavaScript verschärft, was bedeutet, dass andere Dinge vom Browser nicht verarbeitet werden können, während JavaScript ausgeführt wird. Tatsächlich verwenden die meisten Browser einen einzigen Prozess, um mehrere Aufgaben wie UI-Updates und die Ausführung von JavaScript abzuwickeln, und es kann nur eine Aufgabe gleichzeitig ausgeführt werden.

Wie lange läuft das JavaScript und wie lange wartet es dann, bis der Browser inaktiv ist, um auf Benutzereingaben zu reagieren?

Grundsätzlich bedeutet dies, dass das Vorhandensein des -Tags dazu führt, dass die gesamte Seite darauf wartet, dass das Skript analysiert und ausgeführt wird. Unabhängig davon, ob der eigentliche JavaScript-Code inline ist oder in einer unabhängigen externen Datei enthalten ist, muss der Seiten-Download- und Parsing-Prozess angehalten und gewartet werden, bis das Skript diese Verarbeitung abgeschlossen hat, bevor fortgefahren werden kann. Dies ist ein wesentlicher Teil des Seitenlebenszyklus, da Skripte während der Ausführung den Seiteninhalt ändern können.

Ein typisches Beispiel ist die Funktion document.write(), zum Beispiel:

Script Example

document.write(“The date is ” + (new Date()).toDateString());

Nach dem Login kopieren Wenn der Browser auf ein -Tag stößt, wie in der HTML-Seite oben, ist es unmöglich vorherzusagen, ob JavaScript Inhalte in das -Tag einfügt. Daher stoppt der Browser, führt diesen JavaScript-Code aus und fährt dann mit dem Parsen und Übersetzen der Seite fort. Das Gleiche passiert, wenn JavaScript mithilfe des src-Attributs geladen wird. Der Browser muss zunächst den Code für die externe Datei herunterladen, was einige Zeit in Anspruch nimmt, und diesen Code dann analysieren und ausführen. Während dieses Vorgangs werden das Parsen der Seite und die Benutzerinteraktion vollständig blockiert.

HTML 4-Dokumentation besagt, dass ein -Tag im -Tag eines HTML-Dokuments platziert werden kann und darin mehrmals vorkommen kann. Traditionell wird das -Tag zum Laden externer JavaScript-Dateien verwendet. Zusätzlich zu diesem Code enthält der Abschnitt auch -Tags zum Laden externer CSS-Dateien und anderer Seiten-Middleware. Das heißt, es ist besser, die Teile, von denen Stil und Verhalten abhängen, zusammenzufassen und sie zuerst zu laden, damit die Seite das richtige Aussehen und Verhalten erhält. Zum Beispiel:

Script Example

Hello world!

Nach dem Login kopieren Obwohl dieser Code harmlos aussieht, weist er ein Leistungsproblem auf: Im Abschnitt werden drei JavaScript-Dateien geladen. Da jedes -Tag den Parsing-Prozess der Seite blockiert, kann die Seitenverarbeitung erst fortgesetzt werden, wenn der externe JavaScript-Code vollständig heruntergeladen und ausgeführt wurde. Benutzer müssen diese wahrgenommene Verzögerung tolerieren.

Denken Sie daran, dass der Browser keinen Teil der Seite rendert, bis er auf das -Tag trifft. Wenn Sie das Skript auf diese Weise oben auf der Seite platzieren, kommt es zu einer spürbaren Verzögerung, die sich normalerweise dadurch äußert, dass beim Öffnen der Seite zunächst eine leere Seite angezeigt wird und der Benutzer die Seite weder lesen noch mit ihr interagieren kann

Internet Explorer 8, Firefox 3.5, Safari 4 und Chrome 2 ermöglichen das parallele Herunterladen von JavaScript-Dateien. Diese gute Nachricht bedeutet, dass ein -Tag andere -Tags nicht blockieren muss. Leider blockiert das Herunterladen von JavaScript immer noch den Downloadvorgang anderer Ressourcen. Auch wenn sich die Downloadvorgänge zwischen Skripten nicht gegenseitig blockieren, muss die Seite dennoch warten, bis alle JavaScript-Codes heruntergeladen und ausgeführt wurden, bevor sie fortgesetzt werden kann. Obwohl Browser die Leistung verbesserten, indem sie parallele Downloads ermöglichten, wurde das Problem nicht vollständig gelöst und das Blockieren von Skripten war immer noch ein Problem.

Da Skripte den Downloadvorgang anderer Seitenressourcen blockieren, empfiehlt es sich, alle -Tags so nah wie möglich am Ende des -Tags zu platzieren, um die Auswirkungen auf den Download der gesamten Seite zu minimieren Seite. Zum Beispiel:

Script Example

Hello world!

Nach dem Login kopieren Dieser Code zeigt die empfohlene Position des -Tags in der HTML-Datei. Obwohl sich die Skript-Downloads gegenseitig blockieren, wurde die Seite heruntergeladen und vor dem Benutzer angezeigt, und die Geschwindigkeit beim Aufrufen der Seite erscheint nicht zu langsam.

Das Obige ist die relevante Einführung in das Laden und Ausführen von JavaScript-Optimierungsinhalten. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Thema zur JavaScript-Optimierung: Laden und Ausführen, Laden und Ausführen_Javascript-Fähigkeiten