Detaillierte Erläuterung des Ladens und Ausführens von Javascript_Grundkenntnisse

Zuerst möchte ich über das Laden und Ausführen von Javascript sprechen. Im Allgemeinen weisen Browser zwei Hauptmerkmale für die Ausführung von Javascript auf: 1) Es wird unmittelbar nach dem Laden ausgeführt, 2) wenn es ausgeführt wird, blockiert es den nachfolgenden Inhalt der Seite (einschließlich der Darstellung der Seite und des Herunterladens anderer Ressourcen). Wenn daher mehrere JS-Dateien importiert werden, werden diese JS-Dateien für den Browser seriell geladen und nacheinander ausgeführt.

Da Javascript möglicherweise den DOM-Baum des HTML-Dokuments verwaltet, laden Browser im Allgemeinen JS-Dateien nicht parallel herunter, wie sie CSS-Dateien parallel herunterladen, da dies durch die Besonderheit von JS-Dateien verursacht wird. Wenn Ihr Javascript daher die nachfolgenden DOM-Elemente bedienen möchte, meldet der Browser grundsätzlich eine Fehlermeldung, dass das Objekt nicht gefunden werden kann. Denn wenn Javascript ausgeführt wird, wird das nachfolgende HTML blockiert und es gibt keinen nachfolgenden DOM-Knoten im DOM-Baum. Das Programm hat also einen Fehler gemeldet.

Der traditionelle Weg

Wenn Sie also Code schreiben, schreiben Sie den folgenden Code:

Code kopieren Der Code lautet wie folgt:

Wie ist Ihrer Meinung nach die Reihenfolge der Warnungen? Sie können es in verschiedenen Browsern ausprobieren. Hier ist die Testseite, die Sie schließen möchten: Beispiel 2.

Defer- und Async-Attribute des Skripts

IE unterstützt seit IE6 Verzögerungs-Tags, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Für den IE führt dieses Tag dazu, dass der IE die js-Datei parallel herunterlädt und ihre Ausführung anhält, bis das gesamte DOM geladen ist (DOMContentLoaded wird ebenfalls in der Reihenfolge ausgeführt, in der sie angezeigt werden). laufen. Das Wichtigste ist, dass nach dem Hinzufügen von <script> das nachfolgende DOM-Rendering nicht blockiert wird. Da diese Verzögerung jedoch nur für den IE gilt, wird sie im Allgemeinen seltener verwendet. </p> <p>Unser Standard-HTML5 fügt außerdem ein Attribut für das asynchrone Laden von Javascript hinzu: async Egal welchen Wert Sie ihm zuweisen, solange es angezeigt wird, werden js-Dateien asynchron geladen. Das asynchrone Laden weist jedoch ein ernstes Problem auf, das heißt, es setzt die militärische Regel „Sofort nach dem Laden ausführen“ zuverlässig um. Daher können Sie die Reihenfolge und das Timing der Seite nicht steuern seiner Hinrichtung. Schauen Sie sich dieses Beispiel an, um ein Gefühl dafür zu bekommen. </p> <p>Browser, die asynchrone Tags unterstützen, sind: Firefox 3.6, Chrome 8.0, Safari 5.0, IE 10, Opera unterstützt es noch nicht (von hier), daher ist diese Methode nicht sehr gut. Denn nicht alle Browser können das. </p> <p>Dynamische Erstellung von DOM</p> <p>Diese Methode ist wahrscheinlich die am häufigsten verwendete. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="53194" class="copybut" id="copybut53194" onclick="doCopy('code53194')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code53194"> <br> Funktion loadjs(script_filename) {<br> var script = document.createElement('script');<br> ​ script.setAttribute('type', 'text/javascript');<br> ​ script.setAttribute('src', script_filename);<br> ​ script.setAttribute('id', 'coolshell_script_id');<br> <br> ​ script_id = document.getElementById('coolshell_script_id');<br> If(script_id){<br>            document.getElementsByTagName('head')[0].removeChild(script_id);<br> }<br> Document.getElementsByTagName('head')[0].appendChild(script);<br> }<br> <br> var script = 'http://coolshell.cn/asyncjs/alert.js';<br> loadjs(script);<br> </div> <p>Diese Methode ist fast zur Standardmethode zum asynchronen Laden von JS-Dateien geworden. Eine Demonstration dieser Methode finden Sie in Beispiel 3. Diese Methode wurde auch von JSONP ausgenutzt, d Funktion. Sie können sich dieses Beispiel ansehen: t.js (Dieses Beispiel ist ein kleines Beispiel eines asynchronen Ajax-Aufrufs, den ich zuvor auf Weibo angefordert habe) </p> <p>Js bei Bedarf asynchron laden</p> <p>Das obige Beispiel einer DOM-Methode löst das Problem des asynchronen Ladens von Javascript, löst jedoch nicht das Problem, dass wir möchten, dass es zu dem von uns angegebenen Zeitpunkt ausgeführt wird. Daher müssen wir die obige DOM-Methode nur an ein bestimmtes Ereignis binden. </p> <p>Zum Beispiel: </p> <p>Mit window.load-Ereignis verknüpfen – Beispiel 4</p> <p>Sie müssen die Ausführungsunterschiede zwischen Beispiel 4 und Beispiel 3 vergleichen. Ich habe in beiden Beispielen speziell ein Code-Hervorhebungsskript verwendet, um die Ausführung und die Ausführung des Code-Hervorhebungsskripts zu sehen. Sie werden den Unterschied anhand der Ausführung meiner Warnung erkennen .js) </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="34632" class="copybut" id="copybut34632" onclick="doCopy('code34632')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code34632"> <br> window.load = loadjs("<a href="http://coolshell.cn/asyncjs/alert.js">http://coolshell.cn/asyncjs/alert.js</a>")<br> </div> <p>An ein bestimmtes Ereignis knüpfen – Beispiel 5</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="16878" class="copybut" id="copybut16878" onclick="doCopy('code16878')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code16878"> <br> <p style="cursor: pointer" onclick="LoadJS()">Klicken Sie hier, um Alert.js zu laden </p><br> </div> <p>Dieses Beispiel ist sehr einfach. Wenn Sie auf ein DOM-Element klicken, wird tatsächlich unsere alarm.js geladen. </p> <p>Mehr</p> <p>Allerdings scheint die Bindung an ein bestimmtes Ereignis etwas zu viel zu sein, da die js nur dann tatsächlich heruntergeladen werden, wenn darauf geklickt wird, was zu langsam wäre. Okay, hier kommen wir zu unserer letzten Frage: Wir möchten die js-Datei asynchron in den lokalen Bereich des Benutzers herunterladen, sie aber nicht ausführen, sondern nur dann ausführen, wenn wir sie ausführen möchten. </p> <p>Es wäre toll, wenn wir so etwas hätten: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="43581" class="copybut" id="copybut43581" onclick="doCopy('code43581')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code43581"> <br> var script = document.createElement("script");<br> script.noexecute = true;<br> script.src = "alert.js";<br> document.body.appendChild(script);<br> <br> //Wir können das später machen<br> script.execute();<br> </div> <p>Leider ist das nur ein schöner Traum. Heute ist unser Javascript noch relativ primitiv und dieser „JS-Traum“ wurde noch nicht verwirklicht. </p> <p>Unsere Programmierer können dazu also nur Hacking-Methoden verwenden. </p> <p>Einige Programmierer verwenden nicht standardmäßige Skripttypen, um Javascript zwischenzuspeichern. Zum Beispiel: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63471" class="copybut" id="copybut63471" onclick="doCopy('code63471')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code63471"> <br> <script type=cache/script src="./alert.js"></script>