Zusammenfassung der Verwendung von drei JS-Lademethoden-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Zusammenfassung der Verwendung von drei JS-Lademethoden

php中世界最好的语言

May 07, 2018 pm 04:58 PM

javascript使用总结

Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung der drei Lademethoden von JS geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der drei Lademethoden von JS? Das Folgende ist ein praktischer Fall ein Blick.

1: Synchrones Laden

Die am häufigsten verwendete Methode.

<script src="http://yourdomain.com/script.js"></script>

Der synchrone Modus, auch Blockierungsmodus genannt, verhindert die nachfolgende Verarbeitung durch den Browser und stoppt die nachfolgende Analyse. Erst wenn der aktuelle Ladevorgang abgeschlossen ist, kann der nächste Schritt ausgeführt werden. Daher ist die synchrone Ausführung standardmäßig sicher. Wenn jedoch in js Aktionen wie das Ausgeben von Dokumentinhalten, das Ändern von DOM, Umleiten usw. ausgeführt werden, führt dies zu einer Überlastung der Seite. Daher wird generell empfohlen, das <script>-Tag am Ende von <body> zu platzieren, um die Seitenblockierung so weit wie möglich zu reduzieren. <p style="text-align: left;"><p style="text-align: left;">2: Asynchrones Laden <strong>Asynchrones Laden wird auch als nicht blockierendes Laden bezeichnet. Während der Browser js herunterlädt und ausführt, verarbeitet er nachfolgende Seiten weiter. Es gibt drei Hauptwege. <p style="text-align: left;"><p style="text-align: left;">Methode 1: Auch Script-DOM-Element genannt<span style="color: #800000"><pre class="brush:php;toolbar:false">(function(){ var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"; var x = document.getElementsByTagName("head")[0]; x.insertBefore(scriptEle, x.firstChild); })();<async>-Attribut ist eine neue asynchrone Unterstützung in HTML5. Diese Methode wird als Script DOM Element-Methode bezeichnet. Sowohl Google Analytics als auch Google+ Badge verwenden diesen asynchronen Ladecode. <p style="text-align: left;"><pre class="brush:php;toolbar:false">(function(){; var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();Diese Lademethode verhindert jedoch, dass das Onload-Ereignis ausgelöst wird, bevor die Ausführung abgeschlossen ist. Jetzt führt der Code vieler Seiten während des Onloads auch zusätzliche Renderarbeiten aus, sodass die Initialisierungsverarbeitung weiterhin blockiert wird einige Seiten. <p style="text-align: left;"><p style="text-align: left;">Methode 2: Asynchrones Laden während des Onloads <span style="color: #800000"><pre class="brush:php;toolbar:false">(function(){ if(window.attachEvent){ window.attachEvent("load", asyncLoad); }else{ window.addEventListener("load", asyncLoad); } var asyncLoad = function(){ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); } )();Diese Methode fügt einfach die Methode zum Einfügen des Skripts in eine Funktion ein und fügt sie dann in die Onload-Methode des Fensters ein Ausführung, wodurch das Problem der Blockierung der Auslösung von Onload-Ereignissen gelöst wird. <p style="text-align: left;"><p style="text-align: left;">Hinweis: Der Unterschied zwischen DOMContentLoaded und Load. Ersteres geschieht, nachdem das Dokument analysiert wurde und die DOM-Elemente auf der Seite verfügbar sind, die Bilder, Videos, Audiodateien und anderen Ressourcen auf der Seite jedoch nicht geladen wurden. Die Funktion ist dieselbe wie das Ready-Ereignis in jQuery Der Unterschied besteht darin, dass alle Ressourcen auf der Seite geladen wurden. <span style="color: #ff0000"><p style="text-align: left;">Methode 3: Andere Methoden <span style="color: #800000">Aufgrund der dynamischen Natur von JavaScript gibt es viele asynchrone Lademethoden: XHR-Injection, XHR-Eval, Script In Iframe , Skript-Defer-Attribut, document.write (Skript-Tag). <p style="text-align: left;">XHR-Injection (XHR-Injection): Rufen Sie Javascript über XMLHttpRequest ab und erstellen Sie dann ein Skriptelement zum Einfügen in die DOM-Struktur. Nachdem die Ajax-Anfrage erfolgreich war, setzen Sie script.text auf den Antworttext, der nach erfolgreicher Anfrage zurückgegeben wird. <p style="text-align: left;"><pre class="brush:php;toolbar:false"> //获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var script = document.createElement("script"); script.text = xmlHttp.responseText; document.getElementsByTagName("head")[0].appendChild(script); } }XHR Eval: Anders als die XHR-Injection ResponseText ausführt, wird ResponseText direkt in der Funktion eval() ausgeführt. <p style="text-align: left;"><pre class="brush:php;toolbar:false">//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ eval(xmlHttp.responseText); //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来 $("#btn1").click(function(){ alert($(this).text()); }); } }Skript in Irame: Fügen Sie ein Iframe-Element in das übergeordnete Fenster ein und laden Sie dann JS in den Iframe. <p style="text-align: left;"><pre class="brush:php;toolbar:false"> var insertJS = function(){alert(2)}; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。 doc.open(); doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></script>

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von drei JS-Lademethoden. 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

Verwandter Artikel

Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vorByDDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vorByDDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vorByDDD

Heiße Werkzeuge

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.