Je travaille dans le développement frontal depuis plus d'un an, et j'ai encore des informations sur le front-end. Aujourd'hui, je vais partager avec vous.
Divers outils puissants sont indispensables pour le développement frontal. Par exemple, je suis habitué à utiliser Google Browser et Fiddller d'armes lourdes.
1: situation originale
Tout d'abord, jetons un coup d'œil au code suivant:
La copie de code est la suivante:
<% @ Page Language = "C #" AutoEventWireup = "True" CodeBehind = "Default.aspx.cs" HÉRIRS = "JSLODO.DEFAULT"%>
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.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" />
</docy>
</html>
On estime que 90% des programmeurs mettront des fichiers JS dans la tête, mais avez-vous déjà plongé dedans? De nombreux navigateurs utiliseront un seul thread pour effectuer "Interface UI Update" et "JS Script Processing".
Autrement dit, lorsque le moteur d'exécution rencontre "<script>", le téléchargement et le rendu de la page doivent attendre que l'exécution de <Script> soit terminée. Ensuite, c'est triste pour l'utilisateur, en regardant la page verrouillée,
À l'heure actuelle, l'utilisateur l'éteindra probablement pour vous.
Du diagramme de cascade ci-dessus, nous pouvons voir deux points:
D'abord:
Trois fichiers JS sont téléchargés en parallèle, mais selon ma théorie ci-dessus, JS devrait être exécuté un par un. Cependant, dans IE8, Firefox 3.5 et Chrome 2 implémentent tous les deux des téléchargements parallèles de JS.
C'est assez bon, mais cela entravera toujours le téléchargement d'autres ressources, telles que des photos.
deuxième:
Le téléchargement de l'image 1.jpg est déclenché une fois l'exécution JS terminée, ce qui vérifie également la situation mentionnée ci-dessus et empêche l'image de se charger.
Deux: la première étape est l'optimisation
Étant donné que JS empêche le rendu de l'interface utilisateur, nous pouvons envisager de mettre JS devant </body>, de sorte que le HTML avant <Script> peut être rendu parfaitement sans laisser les utilisateurs voir la page vierge attendre.
Et la situation en détresse augmente naturellement l'amitié.
La copie de code est la suivante:
<% @ Page Language = "C #" AutoEventWireup = "True" CodeBehind = "Default.aspx.cs" HÉRIRS = "JSLODO.DEFAULT"%>
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.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>
</docy>
</html>
La figure ci-dessous montre également que 1.jpg et trois js sont téléchargés et exécutés presque parallèles. Le temps est réduit de "469 ms +" ci-dessus à "326 ms".
Trois: la deuxième étape d'optimisation
En regardant le "diagramme de cascade" ci-dessus, je suppose que tout le monde peut également voir que les trois fichiers JS ont fait trois demandes "obtenir". Tout le monde sait que les demandes de GET doivent avoir des en-têtes HTTP.
Il faut donc du temps, donc la solution que nous adoptons est naturellement pour réduire les demandes de GET. Il y a généralement deux options.
Premièrement: Fusiter les fichiers JS, tels que la fusion des "hello.js" et "world.js" ci-dessus sont fusionnés.
Deuxièmement: utilisez des outils tiers, tels que Miniify en PHP.
En ce qui concerne la deuxième méthode, Taobao est beaucoup utilisé. Jetez un œil à l'un des scripts et applique trois fichiers JS. Passez de 3 demandes Get à 1.
Quatrième: la troisième étape d'optimisation
Qu'il s'agisse de mettre le fichier JS à la fin du pied ou de combiner trois en un, son essence est "Mode de blocage", ce qui signifie verrouiller le navigateur. Lorsque la page Web devient de plus en plus complexe, il y a de plus en plus de fichiers JS, ou
Ce qui nous fait mal à la tête, pour le moment, nous préconisons un "mode de blocage sans blocage" pour charger des scripts JS, c'est-à-dire que toutes les pages sont présentées puis JS est ajoutée, ce qui correspond au déclencheur de l'événement de la fenêtre.
L'ajout de JS est le soi-disant "pas de blocage", mais une chose à laquelle il faut faire attention est de savoir si nos exigences pour JS sont en ordre strict.
Premièrement: il n'y a pas d'exigence d'ordre. Par exemple, si je n'ai aucune exigence d'ordre pour "hello.js" et "world.js", nous pouvons utiliser jQuery pour l'ajouter dynamiquement.
La copie de code est la suivante:
<% @ Page Language = "C #" AutoEventWireup = "True" CodeBehind = "Default.aspx.cs" HÉRIRS = "JSLODO.DEFAULT"%>
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.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>");
}
</cript>
</docy>
</html>
Comme on peut le voir sur la figure, "Hello.js" et "world.js" apparaissent sur la ligne bleue, ce qui signifie que ces deux js sont déclenchés pour se charger une fois le DomContentload terminé, afin que la page ne soit pas verrouillée.
attendez.
Deuxièmement: il y a des exigences de commande
Pourquoi doit-il devoir avoir la commande? Pour le fichier "deux JS" dynamiquement annexé ci-dessus, dans la série IE, vous ne pouvez pas garantir que Hello.js sera exécuté avant World.js.
Il exécutera uniquement le code dans la commande renvoyée par le côté serveur.
La copie de code est la suivante:
<% @ Page Language = "C #" AutoEventWireup = "True" CodeBehind = "Default.aspx.cs" HÉRIRS = "JSLODO.DEFAULT"%>
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.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">
fonction chargescript (url, rappel) {
var script = document.createElement ("script");
script.type = "text / javascript";
// c'est-à-dire
if (script.readystate) {
script.onreadystatechange = function () {
if (script.readystate == "chargé" || script.readystate == "complet") {
script.onreadystateChange = null;
callback ();
}
}
} autre {
// non-iie
script.onload = function () {
callback ();
}
}
script.src = url;
document.getElementById ("Head"). APPENDCHILD (script);
}
// La première étape consiste à charger la bibliothèque de classe JQuery
Loadscript ("jQuery / jQuery-1.4.1.js", fonction () {
// La deuxième étape consiste à charger hello.js
Loadscript ("JS / Hello.js", fonction () {
// La troisième étape consiste à charger world.js
Loadscript ("js / world.js", fonction () {
});
});
});
</cript>
</docy>
</html>
Comme vous pouvez également le voir, le temps qu'il faut pour que la page soit entièrement chargée n'est en fait qu'environ 310 ms, ce qui améliore considérablement l'apparence téléchargeable et amicale de la page Web.
Vous pouvez également consulter Tencent.com, ce qu'il fait.
N'est-ce pas très utile? J'ai passé un peu de temps à faire ces recherches et leurs tests ici. J'espère que vous pourrez le voir dans votre cœur. Après tout, c'est aussi la solution de la société "Mahua Vine". Veuillez vous y référer.