Probleme beim Laden und Blockieren von JavaScript-Dateien: Fallstudie zur Leistungsoptimierung

Probleme beim Laden und Blockieren von JavaScript-Dateien: Fallstudie zur Leistungsoptimierung

Lassen Sie mich mit einer Frage beginnen: Wenn Sie beim Schreiben einer HTML-Seite eine JS-Datei von außen importieren möchten, wo wird dann das Skript-Tag platziert? Hat die unterschiedliche Platzierung Auswirkungen auf das Laden der Seite?
Standardmäßig laden Browser JavaScript-Skripte synchron : Das heißt, die Rendering-Engine stoppt, wenn sie auf ein Skript-Tag stößt, wartet, bis das Skript ausgeführt wird , und fährt dann mit dem Rendering fort. Handelt es sich um ein externes Skript, muss zusätzlich der Zeitpunkt des Downloads des Skripts angegeben werden.
Wenn das Skript sehr groß ist , dauert das Herunterladen und Ausführen sehr lange und blockiert den Browser. Benutzer haben das Gefühl, der Browser sei „festgefahren“, mit einer kurzen Leermeldung und keiner Reaktion. Dies führt zu einer sehr schlechten Benutzererfahrung. Für dieses Problem gibt es zwei Lösungen:

①. Ändern Sie die Platzierung des Skript-Tags . Am besten platzieren Sie es am Ende des Body-Tags, also vor dem Tag </body> . Diese Methode hat keinen Einfluss auf die DOM-Darstellung des Browsers und wird ausgeführt, nachdem die Seitenverarbeitung abgeschlossen ist.

②. Konvertieren Sie synchron in asynchron . Der Browser erlaubt das asynchrone Laden von Skripten. Auf diese Weise kann das Skript-Tag weiterhin im Kopf platziert werden. Im Folgenden sind zwei Syntaxen für das asynchrone Laden aufgeführt:

<script src="./1.js" asynchron></script>
<script src="./1.js" verschieben></script>

asynchron und verzögert

Asynchron bedeutet, dass das Skript asynchron geladen wird, wenn das Attribut „defer“ oder „async“ im Skript-Tag aktiviert ist. Wenn die Browser-Rendering-Engine auf diese Befehlszeile stößt, beginnt sie mit dem Herunterladen des externen Skripts . Während des Herunterladens führt die Rendering-Engine die nachfolgenden Befehle direkt aus.

Sowohl „async“ als auch „defer“ verhindern, dass die Rendering-Engine angehalten wird, während externe Skripte heruntergeladen werden.

Der Unterschied zwischen dem asynchronen Attribut und dem Defer ist:

Bildbeschreibung hier einfügen

Die blaue Linie stellt Netzwerklesevorgänge (Skriptdownloads) dar, die rote Linie stellt die Ausführung dar (beides für Skripte); die grüne Linie stellt die HTML-Analyse dar.

Wenn das Attribut „defer“ verwendet wird, lädt der Browser das entsprechende Skript sofort herunter. Die Seitenverarbeitung wird während des Downloadvorgangs nicht angehalten. Das Skript wird erst ausgeführt , wenn die Dokumentanalyse abgeschlossen ist .

async -Attribut, der Browser lädt das entsprechende Skript sofort herunter. Die Seitenverarbeitung wird während des Downloadvorgangs nicht angehalten. Sie wird sofort nach Abschluss des Downloads ausgeführt . Die Seitenverarbeitung wird während des Ausführungsvorgangs angehalten.

Wenn keine Attribute festgelegt sind, wird die Seitenverarbeitung bei Auftreten eines Skripts fortgesetzt, nachdem das Skript heruntergeladen und ausgeführt wurde.

[ Hinweis ] Async ist leistungsfähiger als Defer. Wenn dasselbe Tag beide Attribute gleichzeitig verwendet, befolgen Sie Async! ! !

Mehrere Skripte

Der Unterschied zwischen asynchron und verzögert spiegelt sich nicht nur beim Herunterladen und Ausführen externer Skriptdateien wider, sondern auch im Unterschied, wenn mehrere Skripte vorhanden sind:
Hier ist ein Codebeispiel:

Externe Skriptdateien
1.js-Datei:

// ... viel JS-Code console.log('1');

2.js-Datei:

konsole.log('2');

Haupt-HTML-Datei

Verwenden Sie defer :

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>JS-Blockierung</title>
    <!-- defer lässt dom zuerst ausführen -->
    <script src="./1.js" verschieben></script>
    <script src="./2.js" verschieben></script>
</Kopf>
<Text>
    Wie funktioniert die <h1>js-Blockierung? </h1>
    <Skript>
        document.addEventListener('DOMContentLoaded', Funktion() {
            console.log('DOMContentLoaded');
        })
    </Skript>
</body>
</html>

Ergebnisse der Konsolenausführung:

Bildbeschreibung hier einfügen

Verwenden von async :

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>JS-Blockierung</title>
    <!-- defer lässt dom zuerst ausführen -->
    <script src="./1.js" asynchron></script>
    <script src="./2.js" asynchron></script>
</Kopf>
<Text>
    Wie funktioniert die <h1>js-Blockierung? </h1>
    <Skript>
        document.addEventListener('DOMContentLoaded', Funktion() {
            console.log('DOMContentLoaded');
        })
    </Skript>
</body>
</html>

Ergebnisse der Konsolenausführung:

Bildbeschreibung hier einfügen

Aus den laufenden Ergebnissen der Konsole können wir Folgendes ersehen:
defer : Das erste verzögerte Skript wird vor dem zweiten verzögerten Skript ausgeführt (wenn einige Browser den HTML5-Standard nicht vollständig erfüllen, werden sie natürlich möglicherweise nicht in der richtigen Reihenfolge ausgeführt) , und diese beiden Skripte werden vor dem Ereignis DOMContentLoaded ausgeführt.

async : Der zuerst abgeschlossene Download wird sofort ausgeführt ! ! ! Diese beiden Skripte dürfen nicht ausgeführt werden, bevor das Ereignis DOMContentLoaded ausgelöst wird, sie werden jedoch definitiv vor dem Ereignis window.onload ausgeführt. Darüber hinaus ist zu beachten, dass während der Ausführung des zuerst heruntergeladenen Skripts der Download anderer Skripte nicht unterbrochen wird, sondern fortgesetzt wird.

[ Hinweis ] DOMContentLoaded wird ausgelöst, nachdem das Laden des DOM abgeschlossen ist, d. h. nachdem das Dokument vollständig geladen und analysiert wurde.
○ Weitere Informationen zu DOMContentLoaded finden Sie unter https://www.jb51.net/article/222345.htm

Zusammenfassung

  1. Um eine Blockierung zu verhindern, ist es am besten, den Skript-Tag unten im Textkörper zu platzieren.
  2. defer und async sind in Bezug auf das Lesen (Herunterladen) im Netzwerk gleich, beide sind asynchron (im Vergleich zur HTML-Analyse).
    Der Unterschied zwischen beiden liegt darin , wann das Skript nach dem Herunterladen ausgeführt wird . Offensichtlich entspricht Defer unseren Anforderungen an das Laden und Ausführen von Anwendungsskripten am nächsten, insbesondere in Fällen, in denen Abhängigkeiten zwischen Skriptdateien bestehen (Abhängigkeit bedeutet, dass diese JS-Datei auf den Inhalt der vorherigen JS-Datei verweisen kann). Es führt die Skripte in der Reihenfolge aus, in der sie geladen wurden! ! !
  3. async ist ein Meister der Out-of-Order-Ausführung. Dabei sind das Laden und Ausführen von Skripten eng miteinander verbunden, sodass es unabhängig von der angegebenen Reihenfolge sofort ausgeführt wird, solange es geladen wird. <br /> Wenn Sie genau darüber nachdenken, ist async für Anwendungsskripte nicht sehr nützlich, da es Abhängigkeiten überhaupt nicht berücksichtigt (selbst die niedrigste Ebene der sequentiellen Ausführung), aber es eignet sich sehr gut für Skripte, die von keinem Skript abhängen oder von keinem Skript abhängig sind . Das typischste Beispiel ist: Google Analytics
  4. defer/async eignen sich nur für die Ausführung externer Skripte . Außerdem ist es am besten, async/defer nicht für die Ausführung von DOM-Skripten zu verwenden , da bei Verwendung von async der JS-Code möglicherweise ausgeführt wird, bevor die Seite geladen wird, was wahrscheinlich zu Ausnahmen führt. Wenn Sie es verwenden müssen, können Sie den JS-Teil, der das DOM ausführen muss, zur Ausführung in den DOMContentLoaded-Ereignisrückruf einfügen ☺!

siehe

[1] https://blog.csdn.net/mx18519142864/article/details/82021754
[2] https://blog.csdn.net/weixin_42561383/article/details/86564715
[3] https://segmentfault.com/q/1010000000640869

Dies ist das Ende dieses Artikels über die Leistungsoptimierung bei Problemen mit dem Laden und Blockieren von JavaScript-Dateien. Weitere relevante Inhalte zu Problemen mit dem Laden und Blockieren von JavaScript-Dateien finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung des nicht blockierenden Ladens, der Verzögerung und der asynchronen Funktion in JavaScript
  • Perfekte Lösung für das Blockierungsproblem beim Laden von JS-Dateiseiten
  • Laden Sie JS ohne Blockierung, um zu verhindern, dass die Seitenanzeige durch JS-Ladefehler beeinträchtigt wird
  • Schreiben Sie document.write neu, um ein nicht blockierendes Laden von JS-Anzeigen zu erreichen (Ergänzung).
  • Lösung zur Leistungsoptimierung durch nicht blockierendes Laden in JavaScript

<<:  Wo werden MySQL-Daten gespeichert?

>>:  Vergleich zwischen Redis und Memcache und Auswahlmöglichkeiten

Artikel empfehlen

Ubuntu 16.04 mysql5.7.17 öffnet Remote-Port 3306

Aktivieren Sie den Remotezugriff auf MySQL MySQL-...

MySQL 5.7.18 Green Edition Download- und Installations-Tutorial

Dieser Artikel beschreibt den detaillierten Vorga...

MySQL-Fehler 1290 (HY000) Lösung

Ich habe lange mit einem Problem gekämpft und das...

Zusammenfassung einiger verwandter Vorgänge geplanter Linux-Aufgaben

Ich habe verschiedene große Websites durchsucht u...

Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)

Als am häufigsten verwendetes Layoutelement spielt...

Eine kurze Analyse der vier Importmethoden und Prioritäten in CSS

Erstens: 4 Möglichkeiten, CSS einzuführen Es gibt...

HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

In diesem Artikel wird hauptsächlich die Implemen...

Detaillierte Erklärung der Firewall-Regeleinstellungen und Befehle (Whitelist-Einstellungen)

1. Firewall-Regeln festlegen Beispiel 1: Port 808...

Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins

Inhaltsverzeichnis Jenkins-Installation Installie...

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

Implementierung einer geplanten Sicherung in Mysql5.7

1. Suchen Sie mysqldump.exe im MySQL-Installation...

So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux

Nach der Eingabe von yum in Linux erscheint die E...

Detaillierte Erläuterung der Windows-Zeitserver-Konfigurationsmethode

Kürzlich habe ich festgestellt, dass die Serverze...

js-Methode zur Realisierung der Warenkorbberechnung

In diesem Artikelbeispiel wird der spezifische Co...

Das mobile Vue-Terminal realisiert den gesamten Prozess des Bearbeitens und Löschens nach links

Vorwort Je nach Projektbedarf wird Vue-Touch verw...