Zusammenfassung der Verwendung von JS-Methoden in HTML

Dieses Mal gebe ich Ihnen eine Zusammenfassung zur Verwendung von JS in HTML. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JS in HTML?

Vorwort

JavaScript ist die integrierte Skriptsprache des Browsers. Wenn ein JavaScript-Skript in eine Webseite eingebettet ist und der Browser die Webseite lädt, führt er das Skript aus, um den Browser zu bedienen und verschiedene dynamische Effekte zu erzielen

Methoden zum Einbetten von JavaScript-Code in Webseiten

1.<script>Element bettet Code direkt ein

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

2. <script>Element lädt externes Skript

<script type="text/javascript" src="example.js"></script>

<script>Tag-bezogenesAttribut

Typattribut

• <script>Beim Einbetten von Javascript-Skripten kann das Typattribut weggelassen werden

• Wenn Der Wert des Typattributs wird nicht verwendet, der Browser nicht. Wenn Sie es wissen, wird der Code nicht ausgeführt, sodass Sie jeden Textinhalt in das <script>-Tag einbetten können. Fügen Sie einfach ein Typattribut hinzu, das der Browser nicht verwendet Der Browser wird seinen Inhalt jedoch nicht ausführen oder anzeigen. Dieser <script>-Knoten existiert jedoch weiterhin im DOM, und Sie können das Textattribut des <script>-Knotens verwenden, um seinen Inhalt

zu lesen

defer-Attribut

<script src="a.js" defer></script>
<script src="b.js" defer></script>

Der laufende Prozess des defer-Attributs:

1. Der Browser beginnt, die HTML-Webseite zu analysieren

2. Während des Analysevorgangs wurde festgestellt, dass das Defer-Attribut <script>Element

3. Der Browser analysiert weiterhin die HTML-Webseite und gleichzeitig lädt das vom <script>Element geladene externe Skript parallel herunter

4. Browser Schließen Sie das Parsen der HTML-Webseite ab, gehen Sie dann zurück und führen Sie das heruntergeladene Skript

Hinweis:

• Ressourcen asynchron laden

• Skripte nacheinander ausführen

• Externe Skripte, die mit defer geladen werden, sollten nicht die

  document.write-Methode

async-Attribut

<script src="a.js" async></script>
<script src="b.js" async></script>

The verwenden laufender Prozess des asynchronen Attributs:

1. Der Browser beginnt mit dem Parsen der HTML-Webseite

2. Während des Parsingvorgangs wird das

   Tag mit dem Async-Attribut wurde gefunden <script>

3. Der Browser analysiert weiterhin die HTML-Webseite und lädt sie parallel herunter. Das externe Skript im

   -Tag <script>

4. Der Skript-Download ist abgeschlossen, der Browser stoppt das Parsen der HTML-Webseite und beginnt mit der Ausführung des heruntergeladenen Skripts

5. Skriptausführung Nach Abschluss setzt der Browser das Parsen der HTML-Webseite fort

Hinweis:

• Asynchrones Laden von Ressourcen

• JS wird nicht sein der Reihe nach ausgeführt. Wer es zuerst herunterlädt, wird es zuerst ausführen

• Mit Async geladene externe Skripte sollten nicht die Methode document.write verwenden

Async und Attributinduktion aufschieben

• kann den „Blockierungseffekt“ lösen

• sind alle asynchrone Laderessourcen, aber die Ausführungsreihenfolge ist unterschiedlich

• Wenn keine Abhängigkeit zwischen Skripten besteht, verwenden Sie das async-Attribut. Wenn eine Abhängigkeit zwischen Skripten besteht, verwenden Sie das defer-Attribut

Dynamische Generierung von Skripten

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

• Blockiert das Seitenrendering nicht

• Async ist auf false gesetzt, um sicherzustellen, dass b.js in einem
  ausgeführt wird
• wird nach .js ausgeführt. Die nach diesem Code geladene Skriptdatei wartet, bis b.ja ausgeführt wird, bevor sie

verwandte Zusammenfassung der Wissenspunkte

Der im
1. -Tag enthaltene JavaScript-Code wird von oben bis zum nächsten

   analysiert

2. Egal wie der Code eingebettet ist, solange keine Verzögerungs- und Asynchronattribute vorhanden sind, analysiert der Browser die <Script>-Tags in der Reihenfolge, in der sie auf der Seite erscheinen

3. Vorteile des Ladens externer Skripte: Wartbarkeit, Cachefähigkeit, Anpassungsfähigkeit an die Zukunft

4. <script> Gründe für die Platzierung ganz unten 1. Um das „ Sperrwirkung“. 2. Vermeiden Sie den Aufruf von DOM-Knoten , bevor die DOM-Struktur generiert wurde, was zu einem Fehler führen würde

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So gehen Sie mit verweigertem MySQL-Datenbankzugriff um

So implementieren Sie Spezialeffekte für sechseckige Schaltflächen

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von JS-Methoden in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!