Ich arbeite seit mehr als einem Jahr in der Front-End-Entwicklung und habe immer noch einige Einblicke in das Front-End. Heute werde ich mit Ihnen teilen.
Verschiedene leistungsstarke Werkzeuge sind für die Front-End-Entwicklung unverzichtbar. Zum Beispiel bin ich es gewohnt, Google Browser und Heavy Weapon Fiddller zu verwenden.
1: Originalsituation
Schauen wir uns zunächst den folgenden Code an:
Die Codekopie lautet wie folgt:
< %@ Page Language = "C#" AutoEventwireUp = "True" codeBehind = "default.aspx.cs" inherits = "jsload.Default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script src = "js/hello.js" type = "text/javaScript"> </script>
<script src = "js/world.js" type = "text/javaScript"> </script>
</head>
<body>
<img Src = "1.JPG" />
</body>
</html>
Es wird geschätzt, dass 90% der Programmierer JS -Dateien in den Kopf setzen, aber haben Sie jemals eingeteilt? Viele Browser verwenden einen einzelnen Thread, um "Schnittstellen -UI -Update" und "JS -Skriptverarbeitung" durchzuführen.
Das heißt, wenn die Execution Engine "<Script>" begegnet, muss der Download und Rendering der Seite warten, bis die Ausführung von <Script> abgeschlossen ist. Dann ist es für den Benutzer traurig, auf die gesperrte Seite zu schauen.
Zu diesem Zeitpunkt wird der Benutzer es wahrscheinlich für Sie ausschalten.
Aus dem obigen Wasserfalldiagramm können wir zwei Punkte sehen:
Erste:
Drei JS -Dateien werden parallel heruntergeladen, aber gemäß meiner obigen Theorie sollte JS nacheinander ausgeführt werden. In IE8, Firefox 3.5 und Chrome 2 implementieren jedoch beide parallele Downloads von JS.
Dies ist ziemlich gut, aber es wird immer noch den Download einiger anderer Ressourcen wie Bilder behindern.
zweite:
Der Download von Bild 1.JPG wird nach Abschluss der JS -Ausführung ausgelöst, wodurch auch die oben genannte Situation überprüft wird und das Bild verhindert, dass das Bild geladen wird.
Zwei: Der erste Schritt ist die Optimierung
Da JS die UI -Rendering verhindert, können wir in Betracht ziehen, JS vor </body> zu stellen, damit die HTML vor <Script> perfekt gerendert werden kann, ohne dass Benutzer die leere Seite warten lassen können.
Und die notleidende Situation erhöht natürlich die Freundschaft.
Die Codekopie lautet wie folgt:
< %@ Page Language = "C#" AutoEventwireUp = "True" codeBehind = "default.aspx.cs" inherits = "jsload.Default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img Src = "1.JPG" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script src = "js/hello.js" type = "text/javaScript"> </script>
<script src = "js/world.js" type = "text/javaScript"> </script>
</body>
</html>
Die folgende Abbildung zeigt auch, dass 1.JPG und drei JS fast parallel heruntergeladen und ausgeführt werden. Die Zeit wird von "469 ms+" oben auf "326 ms" verkürzt.
Drei: Der zweite Schritt der Optimierung
Wenn man sich das oben genannte "Wasserfalldiagramm" ansieht, kann jeder auch sehen, dass die drei JS -Dateien drei "Anfragen erhalten". Jeder weiß, dass Anfragen HTTP -Header benötigen.
Daher braucht es Zeit, also ist die von uns übernommene Lösung natürlich, um GET -Anfragen zu reduzieren. Es gibt normalerweise zwei Optionen.
Erstens: Fucken Sie JS -Dateien zusammen, z. B. das Zusammenführen der oben genannten "Hello.js" und "World.js" werden zusammengeführt.
Zweitens: Verwenden Sie Tools von Drittanbietern, wie z. B. Miniify in PHP.
In Bezug auf die zweite Methode wird Taobao ziemlich viel verwendet. Schauen Sie sich eines der Skripte an und wendet drei JS -Dateien an. Wechseln Sie von 3 Anfragen zu 1.
Viertens: Der dritte Schritt der Optimierung
Egal, ob die JS -Datei am Ende des Fußes eingesetzt wird oder drei in eine kombiniert wird, ihre Essenz ist "Blockierungsmodus", was bedeutet, den Browser zu sperren. Wenn die Webseite immer komplexer wird, gibt es immer mehr JS -Dateien oder
Was uns Kopfschmerzen macht, befürworten wir zu diesem Zeitpunkt einen "No Blocking -Modus", um JS -Skripte zu laden, dh alle Seiten werden präsentiert und dann wird JS hinzugefügt, was dem Auslöser des Fensters entspricht.
Das Anhängen von JS ist das sogenannte "No Blocking", aber eine Sache, auf die geachtet werden muss, ist, ob unsere Anforderungen an JS in strenger Reihenfolge sind.
Erstens: Es gibt keine Bestellanforderung. Wenn ich beispielsweise keine Bestellanforderung für "Hello.js" und "World.js" habe, können wir JQuery verwenden, um es dynamisch anzuhängen.
Die Codekopie lautet wie folgt:
< %@ Page Language = "C#" AutoEventwireUp = "True" codeBehind = "default.aspx.cs" inherits = "jsload.Default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img Src = "1.JPG" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
window.onload = function () {
$ ("#head"). append ("<script src = 'js/hello.js' type = 'text/javascript'> <// script>")
$ ("#head"). append ("<script src = 'js/world.js' type = 'text/javaScript'> <// script>");
}
</script>
</body>
</html>
Wie aus der Figur ersichtlich ist, erscheinen "Hello.js" und "World.js" auf der blauen Linie, was bedeutet, dass diese beiden JS nach Abschluss des Domcontent -Ladens ausgeladen werden, damit die Seite nicht gesperrt wird.
Warten.
Zweitens: Es gibt Bestellanforderungen
Warum muss es erforderlich sein, Bestellung zu haben? Für die dynamisch angehängte "Two JS" -Datei oben in der IE -Serie können Sie nicht garantieren, dass Hello.js vor World.js ausgeführt wird.
Es wird den Code nur in der von der Serverseite zurückgegebenen Bestellung ausführen.
Die Codekopie lautet wie folgt:
< %@ Page Language = "C#" AutoEventwireUp = "True" codeBehind = "default.aspx.cs" inherits = "jsload.Default" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img Src = "1.JPG" />
<script type = "text/javaScript">
Funktion loadscript (URL, Rückruf) {
var script = document.createelement ("script");
script.type = "text/javaScript";
// dh
if (script.readystate) {
script.onReadyStatechange = function () {
if (script.readystate == "geladen" || script.readystate == "complete") {
script.onReadyStatechange = null;
callback ();
}
}
} anders {
// nicht ie
script.onload = function () {
callback ();
}
}
script.src = url;
document.getElementById ("head"). appendChild (script);
}
// Der erste Schritt besteht darin, die JQuery -Klassenbibliothek zu laden
loadscript ("jQuery/jQuery-1.4.1.js", function () {
// Der zweite Schritt besteht darin, Hello.js zu laden
ladeScript ("js/hello.js", function () {
// Der dritte Schritt besteht darin, World.js zu laden
loadscript ("js/world.js", function () {
});
});
});
</script>
</body>
</html>
Wie Sie auch sehen können, dauert die Zeit, die die Seite vollständig geladen hat, nur etwa 310 ms, was den Download und das freundliche Erscheinungsbild der Webseite erheblich verbessert.
Sie können auch Tencent.com ansehen, was er tut.
Ist es nicht sehr nützlich? Ich habe einige Zeit damit verbracht, diese Forschung und Tests hier durchzuführen. Ich hoffe du kannst es in deinem Herzen sehen. Immerhin ist dies auch die Lösung der "Mahua Vine" Company. Bitte beachten Sie es.