Vorwort
Unabhängig davon, ob der aktuelle JavaScript -Code eingebettet oder in eine externe Linkdatei eingebettet ist, muss der Download und Rendering der Seite gestoppt werden und warten, bis das Skript ausgeführt wird. Je länger der JavaScript -Ausführungsprozess dauert, desto länger wartet der Browser auf die Antwort auf Benutzereingaben. Der Grund, warum Browser beim Herunterladen und Ausführen von Skripten blockieren, ist, dass Skripte den Namespace der Seite oder JavaScript ändern können, was den Inhalt der nachfolgenden Seiten beeinflusst. Ein typisches Beispiel ist die Verwendung document.write() in einer Seite, z. B. Listing 1
Auflistung 1 JavaScript -Code eingebettete Beispiel
<html> <kopf> <titels> Quellbeispiel </title> </head> <body> <p> <script type = "text/javaScript"> document.write ("Heute ist" + (new Date ()). todestring ()); </script> </p> </body> </html>Wenn der Browser auf ein <script> -Tag trifft, kann die aktuelle HTML -Seite nicht wissen, ob JavaScript dem <p> Tag Inhalte hinzufügt, andere Elemente einführt oder sogar das Tag entfernen. Zu diesem Zeitpunkt wird der Browser daher die Verarbeitung der Seite eingestellt, JavaScript -Code zuerst ausführen und dann die Seite weiter analysieren und rendern. Gleiches gilt beim Laden von JavaScript mit der SRC -Eigenschaft. Der Browser muss sich zunächst die Zeit nehmen, den Code in der externen Linkdatei herunterzuladen und ihn dann analysieren und ausführen. Während dieses Vorgangs sind die Seitenwiedergabe und die Benutzerinteraktion vollständig blockiert.
Skriptsposition
In der HTML 4 -Spezifikation heißt es, dass <Script> Tags in <kopf> oder <body> von HTML -Dokumenten platziert werden können und mehrmals erscheinen dürfen. Webentwickler sind im Allgemeinen daran gewöhnt, den externen Link JavaScript in <kopf> zu laden und dann das <Link> -Tag zum Laden externer Link -CSS -Dateien oder anderen Seiteninformationen zu verwenden. Zum Beispiel Listing 2
Auflistung 2 Beispiel für ineffiziente Skriptpositionen
<html> <kopf> <titels> Quellbeispiel </title> <script type = "text/javaScript" src = "script1.js"> </script> <script type = "text/javascript" src = "script2.js"> </scripttyp "script" src = "script2.js"> </script> </script ". src = "script3.js"> </script> <link rel = "stylesheet" type = "text/css" href = "styles.css"> </head> <body> <p> Hallo Welt! </p> </body> </html>
Dieser herkömmliche Ansatz verbirgt jedoch ernsthafte Leistungsprobleme. In dem Beispiel in Listing 2, wenn der Browser das <Skript> -Tag (Zeile 4) analysiert, wird der Browser nicht mehr analysiert, und prioriert das Herunterladen der Skriptdatei und die Ausführung des Codes, was bedeutet, dass weder die nachfolgende Styles.css -Style -Datei noch die <body> -Tagelung geladen werden können. Da das <body> -Tag nicht geladen werden kann, wird die Seite natürlich nicht gerendert. Daher ist die Seite leer, bis der JavaScript -Code vollständig ausgeführt ist. Abbildung 1 beschreibt den Download -Prozess von Skripten und Stildateien beim Laden von Seite.
Abbildung 1 Laden und Ausführung von JavaScript -Dateien blockieren den Download anderer Dateien
Wir können ein interessantes Phänomen finden: Die erste JavaScript -Datei beginnt mit dem Herunterladen und blockiert den Download anderer Dateien auf der Seite. Darüber hinaus gibt es eine Verzögerung, bevor der Download des Skripts1.js abgeschlossen ist und Skript2.js heruntergeladen wird, was zufällig der Ausführungsprozess der Skript1.js -Datei ist. Jede Datei muss warten, bis die vorherige Datei heruntergeladen und ausgeführt wird, bevor sie mit dem Download beginnen kann. Während des Downloads dieser Dateien nacheinander sieht der Benutzer eine leere Seite.
Beginnend mit IE 8, Firefox 3.5, Safari 4 und Chrome 2 können JavaScript -Dateien parallel heruntergeladen werden. Dies sind gute Nachrichten, da das <script> -Tag beim Herunterladen externer Ressourcen keine anderen <skript> -Tags blockiert. Leider blockiert der JavaScript -Download -Prozess immer noch das Herunterladen anderer Ressourcen wie Style -Dateien und Bilder. Obwohl sich der Skript -Download -Prozess nicht auswirkt, muss die Seite darauf warten, dass alle JavaScript -Code heruntergeladen und ausgeführt werden, bevor sie fortgesetzt werden kann. Während die neuesten Browser die Leistung verbessern, indem es parallele Downloads zulässt, wurde das Problem nicht vollständig behoben und das Skriptblockieren bleibt ein Problem.
Da Skripte Blockdownloads anderer Ressourcen auf der Seite blockieren, wird empfohlen, alle <Script> -Tags am Ende der <body> -Tags so weit wie möglich zu platzieren, um die Auswirkungen auf den gesamten Seiten -Download zu minimieren. Zum Beispiel auflisten 3
Auflistung 3 Beispiel für die empfohlene Codeplatzierung
<html> <Head> <title> Quellbeispiel </title> <link rel = "styleSheet" type = "text/css" href = "styles.css"> </head> <body> <p> Hallo Welt! type = "text/javaScript" src = "script2.js"> </script> src = "script3.js"> </script> </body> </html>
Dieser Code zeigt den empfohlenen Speicherort zum Platzieren von <Script> -Tags in HTML -Dokumenten. Obwohl Skript -Downloads ein anderes Skript blockieren, wurde der größte Teil der Seite heruntergeladen und an den Benutzer angezeigt, sodass der Seitendownload nicht zu langsam erscheint. Dies ist die erste Regel zur Optimierung von JavaScript: Setzen Sie das Skript unten.
Skripte organisieren
Da jedes <Script> -Tag blockiert wird, wenn die Seite ursprünglich heruntergeladen wird, hilft die Reduzierung der Anzahl der auf der Seite enthaltenen Tags bei der Verbesserung dieser Situation. Dies gilt nicht nur für externe Linkskripte, sondern auch für die Anzahl der eingebetteten Skripte. Immer wenn ein Browser während des Parsens einer HTML -Seite auf ein <Script> -Tag trifft, führt dies aufgrund der Ausführung des Skripts zu einer bestimmten Verzögerung. Daher verbessert das Minimieren der Verzögerungszeit die Gesamtleistung der Seite erheblich.
Dieses Problem unterscheidet sich im Umgang mit externen JavaScript -Dateien geringfügig. Angesichts der zusätzlichen Leistungsaufwand von HTTP -Anforderungen ist das Herunterladen einer einzigen 100 -KB -Datei schneller als das Herunterladen von 5 20 -KB -Dateien. Das Reduzieren der Anzahl externer Linkskripte auf der Seite verbessert die Leistung.
Normalerweise muss eine große Website oder Anwendung auf mehrere JavaScript -Dateien stützen. Sie können mehrere Dateien zu einem zusammenführen, damit Sie nur auf ein <Script> -Tag verweisen müssen, um den Leistungsverbrauch zu verringern. Das Zusammenführen von Dateien kann durch Offline-Verpackungstools oder einige Echtzeit-Online-Dienste erreicht werden.
Es ist zu beachten, dass ein eingebettetes Skript nach dem Hinweis auf das externe Linkstilblatt dazu führt, dass die Seite blockiert und darauf wartet, dass das Stylesheet heruntergeladen wird. Dies geschieht, um sicherzustellen, dass die eingebetteten Skripte bei der Ausführung die genauesten Stilinformationen erhalten. Daher wird empfohlen, den eingebetteten Skripten nicht unmittelbar nach dem <Link> -Tag zu folgen.
Nicht blockierende Skripte
Die Reduzierung der Größe der JavaScript-Datei und die Begrenzung von HTTP-Anforderungen ist bei featurereichen Webanwendungen oder großen Websites nicht immer möglich. Je mehr Funktionen eine Webanwendung ist, desto mehr JavaScript -Code benötigt sie. Obwohl das Herunterladen einer einzelnen größeren JavaScript -Datei nur einmal eine HTTP -Anforderung generiert, sperrt der Browser lange Zeit. Um dies zu vermeiden, müssen JavaScript -Dateien schrittweise durch bestimmte Techniken in die Seite geladen werden, damit es den Browser in gewissem Maße nicht blockiert.
Das Geheimnis der Entblocker von Skripten ist, dass JavaScript -Code erst nach dem Laden der Seite geladen wird. Dies bedeutet, das Skript herunterzuladen, nachdem das Onload -Ereignis des Fensterobjekts abgefeuert wurde. Es gibt eine Reihe von Möglichkeiten, um diesen Effekt zu erzielen.
Verzögern Sie das Laden von Skripten
HTML 4 definiert ein erweitertes Attribut für das <Script> Tag: Defer. Das Defer -Attribut zeigt an, dass das in diesem Element enthaltene Skript die DOM nicht ändert, sodass der Code eine sicher verzögerte Ausführung werden kann. Das Defer-Attribut wird nur von IE 4 und Firefox 3.5 später gestützt, sodass es keine ideale Cross-Browser-Lösung ist. In anderen Browsern wird das Defer -Attribut direkt ignoriert, sodass das <script> -Tag in der Standardweise verarbeitet wird, was bedeutet, dass es Blockade verursacht. Dies ist jedoch immer noch eine nützliche Lösung, wenn Ihr Zielbrowser dies unterstützt. Listing 4 ist ein Beispiel
Auflistung 4 Beispiel für die Methode für die Nutzungsnutzung von Defer Attribut
<script type = "text/javaScript" src = "script1.js" Defer> </script>
Das <Script> -Tag mit dem Defer -Attribut kann überall im Dokument platziert werden. Die entsprechende JavaScript -Datei wird heruntergeladen, wenn die Seite an das <Script> -Tag analysiert wird, aber erst ausgeführt wird, wenn das DOM lädt, dh das Onload -Ereignis wird abgefeuert. Wenn eine JavaScript -Datei mit dem Defer -Attribut heruntergeladen wird, blockiert sie andere Prozesse im Browser nicht, sodass solche Dateien parallel zu anderen Ressourcendateien heruntergeladen werden können.
Jedes <Script> -Element mit dem Defer -Attribut wird erst ausgeführt, wenn das DOM geladen ist, ob eingebettete oder externe Skripte. Das Beispiel in Listing 5 zeigt, wie sich das Defer -Attribut auf das Skriptverhalten auswirkt:
Auflistung 5 Der Effekt des Defer -Attributs auf das Skriptverhalten
<html> <kopf> <titels> Skript -Defer -Beispiel </title> </head> <body> <script type = "text/javaScript" Defer> alert ("Defer"); </script> <script type = "text/javaScript"> alert ("script"); </script> <script type = "text/javaScript"> window.onload = function () {alert ("laden"); }; </script> </body> </html>Dieser Code taucht während der Seitenverarbeitung drei Dialogfelder auf. Die Pop-up-Reihenfolge der Browser, die das Defer-Attribut nicht unterstützen, lautet: "Defer", "Skript" und "Load". Auf Browsern, die das Defer-Attribut unterstützen, lautet die Popup-Reihenfolge: "Skript", "Aufschub" und "Load". Beachten Sie, dass das <Script> -Element mit dem Defer -Attribut nach dem zweiten nicht ausgeführt wird, sondern vor dem Auslöser des Onload -Ereignisses aufgerufen wird.
Wenn Ihr Zielbrowser nur Internet Explorer und Firefox 3.5 enthält, ist das Auflaufskript in der Tat nützlich. Wenn Sie mehrere Browser über Domänen hinweg unterstützen müssen, gibt es konsistentere Möglichkeiten, es zu implementieren.
HTML 5 definiert ein neues erweitertes Attribut für das <Script> Tag: Async. Seine Funktion ist die gleiche wie die Aufhebung und kann Skripte asynchron laden und ausführen, ohne die Seite zu blockieren, da Skripte geladen werden. Eine Sache zu beachten ist jedoch, dass im Fall von Async JavaScript -Skripten nach dem Herunterladen ausgeführt werden. Es ist also sehr wahrscheinlich, dass sie nicht in der ursprünglichen Reihenfolge ausgeführt werden. Wenn es vor und nach JavaScript -Skripten Abhängigkeiten gibt, ist es sehr wahrscheinlich, dass ein Fehler mit Async auftritt.
Dynamische Skriptelemente
Mit dem Dokumentobjektmodell (DOM) können Sie fast alle Dokumentinhalte von HTML mit JavaScript dynamisch erstellen. Das <Script> -Element kann wie andere Elemente der Seite sehr einfach mit Standard -DOM -Funktionen erstellt werden:
Listing 6 erstellen <Skript> Elemente mit Standard -DOM -Funktionen
var script = document.createelement ("script"); script.type = "text/javaScript"; script.src = "script1.js"; document.getElementsByTagName ("head") [0] .AppendChild (Skript);Das neue <Script> -Element lädt die Quelldatei script1.js. Laden Sie diese Datei sofort herunter, nachdem das Element zur Seite hinzugefügt wurde. Der wichtigste Punkt dieser Technologie ist, dass unabhängig davon, wo der Download gestartet wird, der Download und Ausführen der Datei keine andere Seitenverarbeitung blockiert. Sie können diese Codes sogar im Abschnitt <Head> platzieren, ohne den Seitencode für den Rest zu beeinflussen (mit Ausnahme von HTTP -Verbindungen, die zum Herunterladen von Dateien verwendet werden).
Wenn eine Datei mit einem dynamischen Skriptknoten heruntergeladen wird, wird der zurückgegebene Code normalerweise sofort ausgeführt (außer Firefox und Opera warten auf alle vorherigen dynamischen Skriptknoten, um die Ausführung zu vervollständigen). Dieser Mechanismus funktioniert einwandfrei, wenn das Skript vom Typ "selbstlaufend" ist. Wenn das Skript jedoch nur Schnittstellen für den Aufruf anderer Skripte auf der Seite enthält, verursacht es Probleme. In diesem Fall müssen Sie verfolgen, ob das Skript -Download abgeschlossen ist und ob es fertig ist. Sie können Dynamic <Script> -Knoten verwenden, um Ereignisse auszugeben, um relevante Informationen zu erhalten.
Firefox, Opera, Chorme und Safari 3+ werden ein Onload -Ereignis ausstellen, nachdem der Empfang <Script> Knotenempfang abgeschlossen ist. Sie können diese Veranstaltung anhören, um Benachrichtigungen vom Skript vorbereitet zu erhalten:
Auflistung 7 Laden von JavaScript -Skripten durch Anhören von Onload -Ereignissen
var script = document.createelement ("script") script.type = "text/javaScript"; // Firefox, Opera, Chrome, Safari 3+script.onload = function () {alert ("script geladen!");}; script.src = "script1.js";Internet Explorer unterstützt eine weitere Implementierung, die ein ReadyStatEchange -Event abgibt. Das Element <Script> verfügt über eine ReadyState -Eigenschaft, deren Wert als Prozess des Herunterladens externer Dateien ändert. Es gibt fünf Werte für ReadyState:
1. "Nicht initialisiert": Standardstatus
2. "Laden": Download beginnt
3. "Laden": Download fertiggestellt
V. "Interaktiv": Der Download ist abgeschlossen, aber noch nicht verfügbar
5. "vollständig": Alle Daten sind fertig
Microsoft Dokumentation besagt, dass diese Werte von ReadyState während des Lebenszyklus des <Script> -Elements möglicherweise nicht angezeigt werden, aber nicht angeben, welche Werte immer verwendet werden. In der Praxis interessiert wir am meisten die "geladenen" und "vollständigen" Zustände. Internet Explorer hat nicht den endgültigen Zustand, der durch diese beiden ReadyState -Werte dargestellt wird. Manchmal erhält das <Script> -Element einen "Loader", aber niemals "vollständig", aber in einigen Fällen "vollständig" erscheint und "geladen" kann nicht verwendet werden. Der sicherste Weg ist die Überprüfung dieser beiden Staaten im Ereignis von ReadyStatechange und wenn einer der Staaten erscheint, löschen Sie das Ereignisgriff von ReadyStatEchange (stellen Sie sicher, dass das Ereignis nicht zweimal verarbeitet wird):
Auflistung 8 Laden von JavaScript -Skripten durch Überprüfen des ReadyState -Status
var script = document.createelement ("script") script.type = "text/javaScript"; // Internet ExplorerScript.onReadyStatechange = function () {if (script.ReadyState == "geladen" || script.ReadyState == "complete") {script.onreadyStatEchange = null; Alert ("Skript geladen."); }}; script.src = "script1.js"; document.getElementsByTagName ("head") [0] .AppendChild (script);In den meisten Fällen möchten Sie eine Funktion aufrufen, um das dynamische Laden von JavaScript -Dateien zu implementieren. Die folgenden Funktionen umfassen die Funktionen, die von Standardimplementierungen und IE -Implementierungen erforderlich sind:
Auflistung 9 Kapselung nach Funktion
function ladeScript (URL, Rückruf) {var script = document.createelement ("script") script.type = "text/javaScript"; if (script.ReadyState) {// IE script.onreadyStatechange = function () {if (script.readystate == "geladen" || script.readystate == "complete") {script.onreadyStatechange = null; callback (); }}; } else {// Andere script.onload = function () {callback (); }; } script.src = url; document.getElementsByTagName ("Kopf") [0] .AppendChild (Skript);}Diese Funktion empfängt zwei Parameter: die URL der JavaScript -Datei und eine Rückruffunktion, die ausgelöst wird, wenn der JavaScript -Empfang abgeschlossen ist. Die Attributprüfung wird verwendet, um zu bestimmen, welches Ereignis zu überwachen ist. Stellen Sie im letzten Schritt die SRC -Eigenschaft fest und fügen Sie das Element <Skript> hinzu. Diese Funktion loadscript () wird wie folgt verwendet:
Auflistung 10 So verwenden Sie die Funktion loadscript ()
ladeScript ("script1.js", function () {alert ("Datei wird geladen!");});Sie können viele JavaScript -Dateien auf der Seite dynamisch laden. Achten Sie jedoch darauf, dass der Browser die Reihenfolge, in der Dateien geladen werden, nicht garantiert. Unter allen wichtigen Browsern stellen nur Firefox und Opera sicher, dass Skripte in der von Ihnen angegebenen Reihenfolge ausgeführt werden. Andere Browser laden und führen verschiedene Codedateien in der Bestellung herunter, die der Server zurückgibt. Sie können Download -Operationen zusammen verkettet, um ihre Bestellung wie folgt zu gewährleisten:
Auflistung 11 laden Sie mehrere JavaScript -Skripte über die Funktion von loelscript ()
ladeScript ("script1.js", function () {ladeScript ("script2.js", function () {ladeScript ("script3.js", function () {alert ("Alle Dateien sind geladen!");});});}); });Dieser Code wartet darauf, dass Skript1.js verfügbar ist, bevor er anfängt, script2.js zu laden, und dann mit dem Laden von script3.js nach scrpt2.js zu laden. Obwohl diese Methode machbar ist, ist sie immer noch ein bisschen problematisch, wenn es viele Dateien zum Herunterladen und Ausführen gibt. Wenn die Reihenfolge mehrerer Dateien sehr wichtig ist, besteht ein besserer Weg darin, die Dateien in der richtigen Reihenfolge mit einer Datei zu verbinden. Eine eigenständige Datei kann den gesamten Code gleichzeitig herunterladen (da dies asynchron erfolgt, gibt es keinen Verlust bei der Verwendung einer großen Datei).
Dynamisches Skriptladen ist das am häufigsten verwendete Muster in nicht blockierenden JavaScript-Downloads, da es Kreuzbrowser sein kann und einfach zu bedienen ist.
Verwenden von XMLHTTPREquest (xhr) Objekt
Diese Technik erstellt zuerst ein XHR -Objekt, lädt dann eine JavaScript -Datei herunter und injiziert dann JavaScript -Code mit einem dynamischen <skript> -Element in die Seite. Listing 12 ist ein einfaches Beispiel:
Auflistung 12 Laden von JavaScript -Skripten über XHR -Objekte
var xhr = new xmlhttprequest (); xhr.open ("get", "script1.js", true); xhr.onReadyStatechange = function () {if (xhr.readystate == 4) {if (xhr.status> = 200 && xhr.status <300 | · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · teada) · status {300 || document.createelement ("script"); script.type = "text/javaScript"; script.text = xhr.responsetext; document.body.appendchild (script); }}}; xhr.send (null);Dieser Code sendet eine GET -Anforderung an den Server, um die Datei script1.js zu erhalten. Der Event -Handler von OnReadyStatechange prüft, ob ReadyState 4 ist, und prüft dann, ob der HTTP -Statuscode gültig ist (2xx bedeutet eine gültige Antwort, 304 bedeutet eine zwischengespeicherte Antwort). Wenn eine gültige Antwort empfangen wird, wird ein neues <Script> -Element erstellt und sein Textattribut auf die vom Server empfangene Antwort auf die Antwort der Antwort festgelegt. Dies erstellt tatsächlich ein <Script> -Element mit Inline -Code. Sobald das neue <Script> -Element zum Dokument hinzugefügt wurde, wird der Code ausgeführt und zur Verwendung bereit.
Der Hauptvorteil dieses Ansatzes besteht darin, dass Sie JavaScript -Code herunterladen können, der nicht sofort ausgeführt wird. Da der Code außerhalb des <script> -Tags zurückgibt (mit anderen Worten, unterliegt er nicht dem <Script> -Tag), wird er nach dem Herunterladen nicht automatisch ausgeführt, sodass Sie die Ausführung verschieben können, bis alles fertig ist. Ein weiterer Vorteil ist, dass der gleiche Code in allen modernen Browsern keine Ausnahmen auswirkt.
Die Hauptbeschränkung dieser Methode besteht darin, dass JavaScript -Dateien in derselben Domäne wie die Seite platziert werden müssen und nicht von CDN heruntergeladen werden können (CDN bezieht sich auf "Inhaltsdeliefernetzwerk", sodass große Webseiten normalerweise keine XHR -Skript -Injektionstechnologie verwenden.
Fügen Sie einige Funktionen hinzu, die Sie normalerweise verwenden
Funktion loadJS (URL, Rückruf, charSet) {var head = document.getElementsByTagName ("head") [0]; var script = document.createelement ("script"); if (!! charset) script.charset = "utf-8"; script.src = url; script.onload = script.onReadyStatechange = function () {var f = script.ReadyState; if (f && f! = "geladen" && f! = "komplett") return; script.onload = script.onReadyStatechange = null; head.removechild (script) if (callback) {callback () || Rückruf}; }; Head.AppendChild (Skript);} // JS Synchronous Loading -Funktion GetCripts (i, linkArray, fn) {env || Getenv (); var script = document.createelement ('script'); script.type = 'text/javaScript'; script.src = linkArray [i]; var head = document.head || document.getElementsByTagName ('Kopf') [0]; head.Appendchild (script); if (env.ie && 'onReadyStatEchange' in Skript &&! ('Draggable' in script)) {// ie browser lädt script.onreadyStatechange = function () {if (/Loaded|Complete/.test(script.ReadyState) {script.onreadyEnange = null; if (i === linkArray.length-1) {if (fn) {fn (); }} else {getScripts (++ i, linkArray, fn); }}}}; } else {script.onload = function () {if (i === linkarray.length-1) {if (fn) {fn (); }} else {getScripts (++ i, linkArray, fn); }}}; }} // js hat eine Abhängigkeitsladedeladung (0, ['http://caibaojian.com/demo/base.js', 'http://caibaojian.com/demo/reset.js'], function () {alert ('callback');Zusammenfassen
Es gibt verschiedene Möglichkeiten, die Leistungsauswirkungen von JavaScript zu verringern:
Wenn Sie alle <Script> -Tags unten auf der Seite setzen, dh vor dem Schließen des Tags stellt dies sicher, dass die Seite vor der Ausführung des Skripts gerendert wurde.
Skripte so weit wie möglich zusammenführen. Je weniger <Script> Tags auf der Seite, desto schneller wird es geladen und je schneller es reagiert. Dies gilt sowohl für externe Skripte als auch für eingebettete Skripte.
Verwenden Sie nicht blockierte JavaScript -Skripte zum Herunterladen:
Verwenden Sie das Defer -Attribut des <script> -Tags (nur für IE und Firefox 3.5 oder höher verfügbar).
Verwenden Sie dynamisch erstellte <Script> Elemente, um Code herunterzuladen und auszuführen.
Verwenden Sie XHR -Objekte, um den JavaScript -Code herunterzuladen und in die Seite zu injizieren.
Die obigen Strategien können die tatsächliche Leistung von Websites und Anwendungen, die viel JavaScript erfordern, erheblich verbessern.
Das obige ist der vollständige Inhalt der Zusammenfassung der JavaScript -Leistungsoptimierung von JavaScript -Leistungsoptimierung und -ausführung. Ich hoffe, es wird für alle hilfreich sein.