Effektive Möglichkeiten zur Verwendung des <script>-Tags in HTML für eine bessere Webentwicklung-js-Tutorial-php.cn

Heim > Web-Frontend > js-Tutorial > Effektive Möglichkeiten zur Verwendung des

<code class=" language-html><head> <script> // JavaScript code here </script> <title>Script in Head</title> </head> <h1>Hello, World!</h1> </p> <p><strong>Ausführungsprozess:</strong></p> <ol> <li>Der Browser analysiert das HTML-Dokument von oben nach unten.</li> <li>Wenn Sie auf das <code><script></code>-Tag im <code><head></code> stoßen, wird das HTML-Rendering angehalten, während das Skript heruntergeladen und ausgeführt wird.</li> <li>Nach der Skriptausführung nimmt der Browser die HTML-Verarbeitung wieder auf.</li> </ol> <p><strong>Nachteile:</strong></p> <ul> <li>Große oder langsam ladende Skripte können das Rendern der Seite verzögern, was zu einem leeren Bildschirm führt.</li> <li>Der Versuch, DOM-Elemente in diesem Skript zu manipulieren, schlägt möglicherweise fehl, weil die Elemente noch nicht geladen wurden.</li> </ul> <p><strong>Ideale Anwendungsfälle:</strong></p> <ul> <li>Skripte, die Funktionen enthalten, die nicht sofort benötigt werden, wie z. B. Analyse- oder Konfigurationscode.</li> </ul> <p><strong>2. <code><script></code>Tag am Ende von <code><body></code></strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-html"><title>Script at Bottom</title> <h1>Hello, World!</h1> <script> // JavaScript code here </script></code>

Nach dem Login kopieren

Ausführungsprozess:

Der Browser lädt und rendert den gesamten HTML-Inhalt.
Das <script>-Tag am Ende von <body> wird nach dem Rendern der Seite verarbeitet und ausgeführt.

Vorteile:

Stellt das vollständige Laden von HTML vor der Skriptausführung sicher.
Verhindert Rendering-Verzögerungen und verbessert die Benutzererfahrung.
DOM-Elemente stehen zur Manipulation bereit.

Nachteile:

Leicht erhöhte Seitenladezeit, da die JavaScript-Ausführung nach dem vollständigen HTML-Rendering erfolgt.

Ideale Anwendungsfälle:

Skripte, die mit Seiteninhalten interagieren (z. B. Ereignis-Listener, Elementänderungen).

3. <script>Tag mit asyncAttribut

<code class="language-html"><head>
  <script async src="script.js"></script>
  <title>Script with Async</title>
</head>
<h1>Hello, World!</h1></code>

Nach dem Login kopieren

Ausführungsprozess:

Der Browser lädt HTML nacheinander.
Bei der Begegnung mit dem async-Skript lädt es das Skript gleichzeitig herunter, während der HTML-Ladevorgang fortgesetzt wird.
Nach dem Herunterladen wird das Skript sofort ausgeführt, das Rendern wird kurz angehalten und dann mit dem Laden des HTML-Codes fortgefahren.

Vorteile:

Nicht blockierend: Das Laden des Skripts erfolgt im Hintergrund, ohne das Rendern der Seite zu verzögern.
Schnelleres Laden der Seite durch paralleles Herunterladen.

Nachteile:

Skripte werden möglicherweise in einer unvorhersehbaren Reihenfolge ausgeführt, wenn mehrere async Skripte vorhanden sind.
Skripte, die auf der HTML-Struktur basieren, werden möglicherweise vorzeitig ausgeführt und verursachen Fehler.

Ideale Anwendungsfälle:

Unabhängige Skripte wie Analysen, Anzeigen oder Social-Media-Widgets, die nicht von anderen Skripten oder HTML-Elementen abhängig sind.

4. <script>Tag mit deferAttribut

<code class="language-html"><head>
  <script>
    // JavaScript code here
  </script>
  <title>Script in Head</title>
</head>
<h1>Hello, World!</h1></code>

Nach dem Login kopieren

Ausführungsprozess:

Der Browser lädt HTML nacheinander.
Das defer-Skript wird gleichzeitig mit dem HTML heruntergeladen, aber erst ausgeführt, nachdem der gesamte HTML-Code analysiert wurde.
Die Ausführung erfolgt unmittelbar vor dem DOMContentLoadedEreignis.

Vorteile:

Stellt die Skriptausführung nach dem vollständigen Laden der Seite sicher.
Behält die Reihenfolge der Skriptausführung bei, wenn mehrere defer Skripte verwendet werden.
Geeignet für Skripte, die von einem vollständig verfügbaren DOM abhängig sind.

Ideale Anwendungsfälle:

Skripte, die das DOM manipulieren, nachdem es vollständig geladen ist.

Vergleichstabelle

Methode Ausführungszeit Blockiert das Rendern Bester Anwendungsfall

Method	Execution Time	Blocks Rendering	Best Use Case
`<script>` in `<head>`	Before HTML load	Yes	Configuration, early execution logic
`<script>` at end of `<body>`	After HTML load	No	DOM manipulation, event handling
`<script async>`	When script is downloaded	No (except during execution)	Analytics, ads, independent scripts
`<script defer>`	After HTML parse	No	DOM-dependent scripts

Vor dem Laden von HTML Ja Konfiguration, frühe Ausführungslogik am Ende von Nach dem HTML-Laden Nein DOM-Manipulation, Ereignisbehandlung Wenn das Skript heruntergeladen wird Nein (außer während der Ausführung) Analysen, Anzeigen, unabhängige Skripte <script defer> Nach der HTML-Analyse Nein DOM-abhängige Skripte

Fazit: Best Practices<script><body>
Verwenden Sie <script async> am Ende von
<body>Verwenden Sie
<head>Platzieren Sie Skripte unten im async, wenn keine Attribute für ein reibungsloses Laden der Seite verwendet werden.defer

ohne

oder <script> zu platzieren, es sei denn, dies ist unbedingt erforderlich, um eine Rendering-Blockade zu verhindern.

Die Beherrschung der Tag-Nutzung ist für die Optimierung von Webanwendungen von entscheidender Bedeutung. Die Wahl zwischen Inline-, internen, externen, asynchronen oder verzögerten Skripten ermöglicht Leistungssteigerungen, verbesserte Wartbarkeit des Codes und ein besseres Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonEffektive Möglichkeiten zur Verwendung des

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2626

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2752

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2334