Heim > Artikel > Web-Frontend > So gestalten Sie das Laden und Ausführen von JavaScript mit detailliertem Beispielcode effizienter

So gestalten Sie das Laden und Ausführen von JavaScript mit detailliertem Beispielcode effizienter

伊谢尔伦Original: 2017-07-21 16:04:031257Durchsuche

Das Skript kann im Kopf der HTML-Seite oder im Textkörper platziert werden.

Fügen Sie das Skript in den Textkörper ein. Wenn der Browser auf das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a stößt, weiß der Browser nicht, ob das Skript Text- oder HTML-Tags einfügt, sodass der Browser die Analyse des HTML-Codes beendet Seite und führen Sie es aus. Beim Hinzufügen von Skripten mit src macht der Browser dasselbe. Das Rendern der Seite und die Benutzerinteraktion werden während der Verarbeitung des Skripts vollständig blockiert. Das Herunterladen und Ausführen von Skripten blockiert das Herunterladen anderer Ressourcen, z. B. Bilder, die zum Rendern der Seite verwendet werden.
Speicherort des Skripts
Aus den oben genannten Gründen sollten Skripte immer am Ende der Seite vor 36cc49f0c466276486e50c850b7e4956 platziert werden.
Ein einfaches Beispiel:

<html> 
<head> 
<title>Script Example</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<p>Hello world!</p> 
<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript" src="file3.js"></script> 
</body> 
</html>

Skripte zusammenführen
Da das Herunterladen von Skripten das Rendern der Seite blockiert, sollte die Verwendung von reduziert werden Tags, unabhängig davon, ob das Skript inline oder extern ist. Die Situation ist besonders, wenn es um externe Skripte geht. Die Zeit, die der Browser zum Herunterladen eines 100-KB-Skripts benötigt, ist viel kürzer als bei vier 25-KB-Skripten, da das Erstellen einer Anfrage viel Zeit in Anspruch nimmt. Daher sollte die Seite Verweise auf externe Skripte minimieren.
Nicht blockierendes Skript
Das Geheimnis besteht darin, das Skript zu laden, nachdem das Laden der Seite abgeschlossen ist, also bevor das Onload-Ereignis des Fensterobjekts ausgelöst wird. Es gibt mehrere Möglichkeiten, dies zu erreichen:
1. Verwenden Sie „defer“

<html> 
<head> 
<title>Script Defer Example</title> 
</head> 
<body> 
<script defer> 
alert("defer"); 
</script> 
<script> 
alert("script"); 
</script> 
<script> 
window.onload = function(){ 
alert("load"); 
}; 
</script> 
</body> 
</html>

Die Reihenfolge, in der die Seiten-Popup-Felder angezeigt werden: script/defer/load Der Nachteil dieser Technologie besteht darin, dass IE4+ und FF3.5+ nur unterstützt werden.

Nicht blockierende Skripte (Fortsetzung)

2. Dynamische Skriptelemente Sie müssen wissen, dass sich 3f1c4e4b6b16bbbd69b2ee476dc4f83a nicht wesentlich von gewöhnlichen HTML-Tags unterscheidet, sodass Sie den Standard verwenden können DOM-Methode zum dynamischen Hinzufügen von Skriptdateiverweisen. Die Methode ist wie folgt:

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

Sobald dieses Tag zum HTML hinzugefügt wurde, beginnt der Download der Skriptdatei. Ein Merkmal dieser Methode besteht darin, dass das Herunterladen und Ausführen von Dateien die Verarbeitung anderer Teile der HTML-Seite nicht blockiert. Normalerweise ist es sicherer, solche Skripte in 93f0f5c25f18dab9d176bd4f6de5d30e zu platzieren als in 6c04bd5ca3fcae76e30b72ad730ca86d, insbesondere wenn der in der Datei enthaltene Code beim Ladeereignis der Seite ausgeführt werden muss. Wenn der Inhalt des Körpers nicht vollständig geladen wurde, zeigt der IE außerdem die Fehlermeldung „Vorgang verboten“ an.

Wenn die Skriptdatei heruntergeladen wird, wird das Skript sofort ausgeführt (FF und Opera warten auf die Ausführung des zuvor hinzugefügten Skripts auf die gleiche Weise). Dies ist in Ordnung, wenn das Skript sich selbst ausführt. Wenn das Skript jedoch Schnittstellen enthält, die von anderen Skripten auf der Seite verwendet werden, müssen Sie sicherstellen, dass das Skript geladen und verfügbar ist. Glücklicherweise lösen Firefox, Opera, Chrome und Safari 3+ ein Ladeereignis aus, nachdem sie den Wert des src des Skript-Tags erhalten haben.

var script = document.createElement("script") 
script.type = "text/javascript"; 
//Firefox, Opera, Chrome, Safari 3+ 
script.onload = function(){ 
alert("Script loaded!"); 
}; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

IE bietet ein weiteres lösungsbereites Statechange-Event. Abhängig vom Status des Herunterladens der

-Skriptdatei lauten die Werte von readyState wie folgt:
"uninitialisiert"
Standardstatus
"laden"
Download starten
"geladen "
Download abgeschlossen
"interaktiv"
Download abgeschlossen, aber nicht alle verfügbar
"vollständig"
Alle Daten verfügbar
IE-Implementierung:

Das obige ist der detaillierte Inhalt vonSo gestalten Sie das Laden und Ausführen von JavaScript mit detailliertem Beispielcode effizienter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codezusammenfassung von vier häufig verwendeten dynamischen JavaScript-LademethodenNächster Artikel：Codezusammenfassung von vier häufig verwendeten dynamischen JavaScript-Lademethoden

In Verbindung stehende Artikel

Mehr sehen