Les performances de JavaScript dans le navigateur peuvent être considérées comme le problème de convivialité le plus important à laquelle les développeurs frontaux doivent affronter.
Parmi les règles Yslow23 de Yahoo, l'une d'elles consiste à mettre JS en bas. La raison en est que, en fait, la plupart des navigateurs utilisent un seul processus pour traiter plusieurs tâches telles que l'interface utilisateur et la mise à jour des exécutions JavaScript, et une seule tâche est exécutée en même temps. Combien de temps le JavaScript fonctionne-t-il, combien de temps cela prendra-t-il pour attendre avant que le navigateur ne soit inactif de répondre à l'interaction utilisateur.
Dans une perspective de base, cela signifie que l'apparence de la balise <cript> fait attendre toute la page en raison de l'analyse du script et de l'exécution. Que le code JavaScript réel soit incliné ou contenu dans un fichier externe non pertinent, le processus de téléchargement et d'analyse de la page doit être arrêté et attendre que le script termine ces traitements avant de continuer. Il s'agit d'une partie essentielle du cycle de vie de la page, car le script peut modifier le contenu de la page pendant l'exécution. Un exemple typique est la fonction document.write (), par exemple:
La copie de code est la suivante:
<html>
<adal>
<Title> Exemple de script </TITME>
</ head>
<body>
<p>
<script type = "text / javascript">
Document.Write ("La date est" + (new Date ()). TodateString ());
</cript>
</p>
</docy>
</html>
Lorsque le navigateur rencontre une balise <cript>, comme dans la page HTML ci-dessus, il est impossible de prédire si JavaScript ajoute du contenu à la balise <p>. Par conséquent, le navigateur s'arrête, exécute ce code JavaScript, puis continue d'analyser et de traduire la page. La même chose se produit lors du chargement JavaScript à l'aide de la propriété SRC. Le navigateur doit d'abord télécharger le code du fichier externe, qui prend un certain temps, puis analyser et exécuter ce code. Au cours de ce processus, l'analyse de la page et l'interaction utilisateur sont complètement bloquées.
Étant donné que le script bloque le processus de téléchargement des autres ressources de page, la méthode recommandée est: Placez toutes les balises <cript> aussi près du bas de la balise <body> que possible pour minimiser l'impact sur l'ensemble du téléchargement de la page. Par exemple:
La copie de code est la suivante:
<html>
<adal>
<Title> Exemple de script </TITME>
<link rel = "stylesheet" type = "text / css" href = "Styles.css">
</ head>
<body>
<p> Bonjour le monde! </p>
<- Exemple de positionnement de script recommandé ->
<script type = "text / javascript" src = "file1.js"> </ script>
<script type = "text / javascript" src = "file2.js"> </ script>
<script type = "text / javascript" src = "file3.js"> </ script>
</docy>
</html>
Ce code montre où se trouve la balise <cript> recommandée dans le fichier HTML. Bien que les téléchargements de scripts soient bloqués les uns entre les autres, la page a été téléchargée et affichée devant l'utilisateur, et la vitesse de saisie de la page n'apparaîtra pas trop lentement. C'est ce qui a mentionné ci-dessus pour mettre JS au fond.
De plus, Yahoo! Crée une "poignée fédérale" pour sa bibliothèque "Yahoo! Interface utilisateur, YUI", qui est implémentée via leur "Network de livraison de contenu (CDN). Tout site Web peut utiliser une URL" Handle fédérale "pour indiquer quels fichiers sont inclus dans le package de fichiers YUI. Par exemple, l'URL suivante contient deux fichiers:
La copie de code est la suivante:
<script type = "text / javascript" src = "http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"> </ script>
Cette URL appelle les fichiers yahoo-min.js et event-mini.js dans la version 2.7.0. Ces fichiers sont deux fichiers distincts sur le serveur, mais lorsque le serveur reçoit cette demande d'URL, les deux fichiers seront fusionnés et renvoyés au client. De cette façon, deux balises <cript> ne sont plus nécessaires (un fichier est chargé pour chaque balise) et une balise <cript> peut les charger. C'est le meilleur moyen d'inclure plusieurs JavaScript externe dans les pages HTML.
Scripts noblocking
Ce qui précède est le meilleur moyen de charger plusieurs scripts JavaScript dans l'état initial de la page. JavaScript a tendance à bloquer certains processus de traitement du navigateur, tels que les demandes HTTP et les rafraîchissements d'interface, qui sont les problèmes de performance les plus significatifs auxquels sont confrontés les développeurs. Garder les fichiers JavaScript courts et limiter le nombre de demandes HTTP n'est que la première étape pour créer une application Web réactive.
Mais comme les grandes pages Web avec beaucoup de code JS, garder le code source court n'est pas toujours le meilleur choix. Ainsi, les scripts non bloquants ont vu le jour, ce dont nous avons besoin, c'est d'ajouter progressivement JavaScript à la page, qui ne bloquera pas le navigateur dans une certaine mesure.
La clé pour ne pas bloquer les scripts est de charger le code source JavaScript après le chargement de la page, ce qui signifie que le téléchargement de code commence après l'émission de l'événement de chargement de la fenêtre.
Explications connexes:
L'événement de chargement de la fenêtre ne sera tiré qu'une seule fois et une seule fois après le chargement de la page.
window.onload = function () {} doit attendre que tous les contenus de la page Web se chargent (y compris tous les fichiers associés d'éléments, tels que les images) à exécuter, c'est-à-dire que JavaScript peut accéder à n'importe quel élément de la page à l'heure actuelle.
Les méthodes suivantes sont:
Scripts différés
HTML4 définit un attribut étendu pour le <script> tag: différer.
Cet attribut de repère indique que le script contenu dans l'élément n'a pas l'intention de modifier le DOM, de sorte que le code peut être exécuté plus tard. L'attribut de différence est uniquement pris en charge par Internet Explorer 4+ et Firefox 3.5+, et ce n'est pas une solution de navigateur intermédiaire idéale. Sur les autres navigateurs, l'attribut de report sera ignoré. Par conséquent, la balise <cript> sera traitée de la manière par défaut normale, ce qui signifie qu'elle entraînera un blocage. S'il est soutenu par divers navigateurs grand public, il s'agit toujours d'une solution efficace.
La copie de code est la suivante:
<script type = "text / javascript" src = "file1.js" Defer> </ script>
Une balise <cript> avec l'attribut de différence peut être placée n'importe où dans le document, et il démarre le téléchargement lorsqu'il est analysé jusqu'à ce que le DOM se charge (avant que la poignée de l'événement Onload ne soit appelée). Lorsqu'un fichier JavaScript de report est téléchargé, il ne bloque pas d'autres processus de traitement dans le navigateur, de sorte que ces fichiers peuvent être téléchargés en parallèle avec d'autres ressources.
Vous pouvez utiliser le code suivant pour tester si le navigateur prend en charge l'attribut de différence:
La copie de code est la suivante:
<html>
<adal>
<Title> Exemple de différence de script </Title>
</ head>
<body>
<Script Defer> alert ("Defer"); </cript>
<Script> alert ("script"); </cript>
<Script> window.onLoad = function () {alert ("Load");}; </cript>
</docy>
</html>
Si le navigateur ne prend pas en charge le report, l'ordre des boîtes de dialogue pop-up est "différer", "script" et "charger".
Si le navigateur prend en charge le report, l'ordre des boîtes de dialogue pop-up est "script", "charger", "différer".
Éléments de script dynamique
DOM nous permet de créer dynamiquement presque tous les contenus de document de HTML à l'aide de JavaScript, et un nouvel élément <cript> peut être créé très facilement via DOM standard:
La copie de code est la suivante:
1 var script = document.createElement ("script");
2 script.type = "text / javascript";
3 script.src = "file1.js";
4 document.body.appendChild (script);
Le nouvel élément <cript> charge le fichier source de fichier1.js. Téléchargez ce fichier immédiatement après l'ajout de l'élément à la page. Le point clé de cette technologie est que peu importe où le téléchargement est démarré, le téléchargement et l'exécution du fichier ne bloqueront pas d'autres traitements de page.
Lorsqu'un fichier est téléchargé à l'aide d'un nœud de script dynamique, le code retourné est généralement exécuté immédiatement (sauf Firefox et Opera, qui attendra que tous les nœuds de script dynamique précédents soient exécutés).
Dans la plupart des cas, nous espérons appeler une fonction pour implémenter le téléchargement dynamique des fichiers JavaScript. L'encapsulation de la fonction suivante implémente les implémentations standard et les implémentations: IE:
La copie de code est la suivante:
fonction chargescript (url, rappel) {
var script = document.createElement ("script");
script.type = "text / javascript";
if (script.readystate) {// ie
script.onreadystatechange = function () {
if (script.readystate == "chargé" || script.readystate == "complet") {
script.onreadystateChange = null;
callback ();
}
};
}
else {// autres
script.onload = function () {callback ();
};
}
script.src = url;
document.getElementsByTagName ("Head") [0] .APPEndChild (script);
}
Loadscript ("file1.js", fonction () {// appelle
alert ("Le fichier est chargé!");
});
Cette fonction accepte deux paramètres: l'URL du fichier JavaScript et une fonction de rappel qui est déclenchée lorsque la réception JavaScript est terminée. La vérification des attributs est utilisée pour déterminer l'événement à surveiller. La dernière étape consiste à attribuer SRC et à ajouter le fichier JavaScript à la tête.
Le chargement dynamique du script est le modèle le plus couramment utilisé dans les téléchargements JavaScript non bloquants car il peut être un cross-navigateur et est facile à utiliser.
Injection de script xmlhttprequest injection de script xhr
Une autre façon d'obtenir des scripts de manière non bloquante consiste à injecter des scripts dans la page à l'aide de l'objet XMLHttpRequest (XHR). Cette technique crée d'abord un objet XHR, puis télécharge un fichier JavaScript, puis injecte le code JavaScript dans la page avec un élément dynamique <script>. Regardez la démo:
La copie de code est la suivante:
var xhr = new xmlHttpRequest ();
xhr.open ("get", "file1.js", true);
xhr.onreadystateChange = function () {
if (xhr.readystate == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// Vérifiez le code d'état HTTP
var script = document.createElement ("script");
script.type = "text / javascript";
script.text = xhr.ResponSeText;
document.body.appendChild (script);
}
}
};
xhr.send (null);
Ce code envoie une demande de GET de fichier au serveur pour obtenir un fichier1.js. Le gestionnaire d'événements OnreadyStateChange vérifie si ReadyState est 4, puis vérifie si le code d'état HTTP est valide (200 signifie confirmant que la demande du client a été réussie, 2xx signifie une réponse valide et 304 signifie une réponse en cache). Si une réponse valide est reçue, un nouvel élément <cript> est créé et son attribut de texte est défini sur la chaîne ResponseText reçue du serveur. Cela créera en fait un élément <cript> avec du code en ligne, et une fois qu'un nouvel élément <cript> sera ajouté au document, le code sera exécuté et prêt à être utilisé.
L'avantage de cette méthode est qu'il a une bonne compatibilité et que vous pouvez télécharger le code JavaScript qui n'est pas exécuté immédiatement. Étant donné que le code revient en dehors de la balise <cript>, il ne sera pas exécuté automatiquement après le téléchargement, ce qui vous permet de reporter l'exécution.
La détermination de cette méthode est soumise à des restrictions homologues du navigateur. Les fichiers JavaScript doivent être placés dans le même domaine que la page et ne peuvent pas être téléchargés à partir du CDN (Content Delivery Network). Pour cette raison, les grandes pages Web n'utilisent généralement pas la technologie d'injection de script XHR.
Modèle de noblocking recommandé Motif de noblocking recommandé
La méthode recommandée pour charger une grande quantité de JavaScript à une page est divisée en deux étapes:
La première étape comprend le code requis pour charger dynamiquement JavaScript, puis charger la pièce sauf JavaScript requise pour l'initialisation de la page. Cette partie du code est aussi petite que possible et ne peut inclure que la fonction LoadScript (). Il télécharge et s'exécute très rapidement et ne provoquera pas beaucoup d'interférences à la page.
La deuxième étape consiste à l'utiliser pour charger le reste de JavaScript une fois le code initial prêt.
Par exemple:
La copie de code est la suivante:
1 <script type = "text / javascript" src = "loder.js">
2 </cript> <script type = "text / javascript">
3 Loadscript ("the-rest.js", fonction () {
4 application.init ();
5});
6
7 </cript>
Placez ce code avant la fermeture du corps </body>. L'avantage de le faire est que d'abord, cela garantit que JavaScript s'exécute sans affecter d'autres parties d'autres pages à afficher. Deuxièmement, lorsque la deuxième partie du fichier JavaScript est téléchargée, tous les DOM nécessaire pour l'application ont été créés et prêts à être accessibles, en évitant l'utilisation d'un traitement d'événements supplémentaires (tel que Window.onLoad) pour savoir si la page est prête.
Une autre option consiste à intégrer directement la fonction LoadScript () dans la page, ce qui peut réduire la surcharge d'une demande HTTP. Par exemple:
La copie de code est la suivante:
1 <script type = "text / javascript">
fonction chargescript (url, rappel) {
var script = document.createElement ("script");
script.type = "text / javascript";
if (script.readystate) {// ie script.onreadystatechange = function () {
if (script.readystate == "chargé" || script.readystate == "complet") {
script.onreadystateChange = null;
callback ();
}
};
} else {// autres
script.onload = function () {
callback ();
};
}
script.src = url;
document.getElementsByTagName ("Head") [0] .APPEndChild (script);
}
Loadscript ("the-rest.js", fonction () {
Application.init ();
});
</cript>
Une fois le code d'initialisation de la page téléchargé, vous pouvez également utiliser la fonction LoadScript () pour charger les fonctions fonctionnelles supplémentaires requises par la page.
Présentation d'un outil commun, Ryan Grove de Yahoo! La recherche a créé la bibliothèque Lazyload (voir: http://github.com/rgrove/lazyload/). Lazyload est une fonction de chargement puissante (). Lazyload n'a qu'environ 1,5 Ko après la mise à l'échelle. Des exemples d'utilisation sont les suivants:
La copie de code est la suivante:
<script type = "text / javascript" src = "lazyload-min.js"> </ script>
<script type = "text / javascript">
Lazyload.js ("the-rest.js", fonction () {
Application.init ();
});
</cript>
Résumé
1. Placez toutes les balises <cript> en bas de la page, près de la balise proche </body>. Cette méthode garantit que la page est analysée avant l'exécution du script.
2. Emballez les scripts en groupes. Moins des balises <cript> sur une page moins importantes, plus la page se chargera et répondra plus rapidement. Cela est vrai pour les fichiers de script externes et le code en ligne.
3. Il existe plusieurs façons de télécharger JavaScript en utilisant des méthodes non bloquantes:
1). Ajouter un attribut de différence à la balise <cript>
2). Créez dynamiquement l'élément <cript>, utilisez-le pour télécharger et exécuter le code
3). Utilisez l'objet XHR pour télécharger le code et l'injecter dans la page
Grâce à la stratégie ci-dessus, les performances réelles des internautes qui utilisent le code JavaScript peuvent être considérablement améliorées.
Livre de référence "JavaScript haute performance".