Heim > Artikel > Web-Frontend > Thema zur JavaScript-Optimierung: Laden und Ausführen, Laden und Ausführen_Javascript-Fähigkeiten

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

WBOYOriginal: 2016-05-16 15:19:101003Durchsuche

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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:

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

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

</script>

</p>

</body>

</html>

Wenn der Browser auf ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag stößt, wie in der HTML-Seite oben, ist es unmöglich vorherzusagen, ob JavaScript Inhalte in das e388a4556c0f65e1904146cc1a846bee-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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag eines HTML-Dokuments platziert werden kann und darin mehrmals vorkommen kann. Traditionell wird das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag zum Laden externer JavaScript-Dateien verwendet. Zusätzlich zu diesem Code enthält der Abschnitt 93f0f5c25f18dab9d176bd4f6de5d30e auch 2cdf5bf648cf2f33323966d7f58a7f3f-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:

<html>

<head>

<title>Script Example</title>

<– Example of inefficient script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Obwohl dieser Code harmlos aussieht, weist er ein Leistungsproblem auf: Im Abschnitt 93f0f5c25f18dab9d176bd4f6de5d30e werden drei JavaScript-Dateien geladen. Da jedes 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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 6c04bd5ca3fcae76e30b72ad730ca86d-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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag andere 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags so nah wie möglich am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags zu platzieren, um die Auswirkungen auf den Download der gesamten Seite zu minimieren Seite. Zum Beispiel:

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<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>

Dieser Code zeigt die empfohlene Position des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-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.

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：AngularJS-Modul lernt Anchor Scroll_AngularJSNächster Artikel：AngularJS-Modul lernt Anchor Scroll_AngularJS

In Verbindung stehende Artikel

Mehr sehen