Afin de fournir une expérience utilisateur fraîche et unique, de nombreux sites Web utilisent JavaScript pour améliorer la conception, vérifier les formulaires, vérifier les navigateurs, ainsi que les demandes de l'Ajax, les opérations de cookies, etc., pour obtenir des effets dynamiques sans rafraîchissement. Cependant, si vous souhaitez rendre une grande quantité de contenu dans le navigateur, s'il n'est pas traité correctement, les performances du site Web baisseront fortement. Il est donc nécessaire de comprendre comment améliorer l'efficacité d'exécution de JavaScript.
Fonctions JavaScript
Dans JavaScript, les fonctions sont précompilées avant utilisation. Bien que parfois des chaînes puissent être utilisées à la place des fonctions, ce code JavaScript sera rétabli à chaque fois qu'il s'exécute, affectant les performances.
1. Exemple d'évaluation
La copie de code est la suivante:
eval ('output = (entrée * entrée)');
// Il est recommandé de passer à:
eval (new function () {output = (input * input)});
2. Exemple Settimeout
La copie de code est la suivante:
setTimeout ("alert (1)", 1000);
// Il est recommandé de passer à:
setTimeout (function () {alert (1)}, 1000);
Utilisez des fonctions au lieu des chaînes comme paramètres pour garantir que le code de la nouvelle méthode peut être optimisé par le compilateur JavaScript.
Portée JavaScript
Chaque portée de la chaîne de portée JavaScript contient plusieurs variables. Il est important de comprendre la chaîne de portée afin que vous puissiez en profiter.
La copie de code est la suivante:
var localvar = "global"; // Variables globales
fonction test () {
var localvar = "local"; // Variables locales
// Variables locales
alerte (localvar);
// Variables globales
alerte (this.localvar);
// Trouvez le document et la variable locale ne peut être trouvée, alors recherchez la variable globale
var pageName = document.getElementById ("pageName");
}
L'utilisation de variables locales est beaucoup plus rapide que d'utiliser des variables globales, car plus la chaîne de portée plus éloignée, plus l'analyse, est plus lente. La figure suivante montre la structure de la chaîne de portée:
S'il y a avec ou des instructions d'essai dans le code, la chaîne de portée sera plus compliquée, comme indiqué dans la figure ci-dessous:
Chaînes javascript
Une fonction en JavaScript qui a un impact très performant est la concaténation des cordes. Généralement, le signe + est utilisé pour implémenter l'épissage des chaînes. Cependant, les premiers navigateurs n'ont pas optimisé ces méthodes de connexion, ce qui a entraîné la création et la destruction continues de chaînes qui ont gravement réduit l'efficacité de l'exécution JavaScript.
La copie de code est la suivante:
var txt = "hello" + "" + "monde";
Il est recommandé de passer à:
La copie de code est la suivante:
var o = [];
o.push ("bonjour");
O.push ("");
O.push ("monde");
var txt = o.join ();
Encapsulons simplement:
La copie de code est la suivante:
fonction stringbuffer (str) {
var arr = [];
arr.push (str || "");
this.append = fonction (str) {
arr.push (str);
retourner ceci;
};
this.toString = function () {
return arr.join ("");
};
};
Ensuite, appelez ceci:
La copie de code est la suivante:
var txt = new StringBuffer ();
txt.append ("bonjour");
txt.append ("");
txt.append ("monde");
alert (txt.toString ());
Opération JavaScript DOM
Le modèle d'objet de document HTML (DOM) définit un moyen standard d'accéder et de manipuler les documents HTML. Il représente un document HTML en tant qu'arbre de nœud qui contient des éléments, des attributs et du contenu texte. En utilisant HTML DOM, JavaScript peut accéder et manipuler tous les nœuds dans un document HTML.
Dom repeindre
Chaque fois qu'un objet DOM modifié en page implique un redémarrage de DOM, le navigateur renforcera la page. Par conséquent, la réduction du nombre de modifications des objets DOM peut efficacement améliorer les performances de JavaScript.
La copie de code est la suivante:
pour (var i = 0; i <1000; i ++) {
var elmt = document.CreateElement ('p');
elmt.innerhtml = i;
Document.Body.ApendChild (ELMT);
}
Il est recommandé de passer à:
La copie de code est la suivante:
var html = [];
pour (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
}
document.body.innerhtml = html.join ('');
Accès DOM
Chaque nœud du document HTML est accessible via le DOM. Chaque fois que vous appelez GetElementById (), GetElementsByTagName () et d'autres méthodes, le nœud sera re-finis et accessible. Par conséquent, le cache des nœuds DOM trouvé peut également améliorer les performances de JavaScript.
La copie de code est la suivante:
document.getElementById ("p2"). style.color = "bleu";
document.getElementById ("p2"). style.fontfamily = "Arial";
document.getElementById ("p2"). style.fontize = "plus grand";
Il est recommandé de passer à:
La copie de code est la suivante:
var elmt = document.getElementById ("p2");
elmt.style.color = "bleu";
Elmt.style.fontfamily = "Arial";
elmt.style.fontize = "plus grand";
Dom Traversé
Les éléments enfants de traverse DOM lisent généralement le prochain élément enfant par la boucle d'index. Dans les premiers navigateurs, cette méthode de lecture est très efficace dans l'exécution. L'utilisation de la méthode de NextSibling peut améliorer l'efficacité de la traversée de DOM par JS.
La copie de code est la suivante:
var html = [];
var x = document.getElementsByTagName ("p"); // tous les nœuds
pour (var i = 0; i <x.length; i ++) {
//faire
}
Il est recommandé de passer à:
La copie de code est la suivante:
var html = [];
var x = document.getElementById ("div"); // le nœud supérieur
var nœud = x.firstChild;
while (nœud! = null) {
//faire
node = node.nextsibling;
}
Version de mémoire JavaScript
Dans les applications Web, à mesure que le nombre d'objets DOM augmente, la consommation de mémoire deviendra de plus en plus grande. Par conséquent, les références aux objets doivent être libérées dans le temps afin que le navigateur puisse recycler cette mémoire.
Libre la mémoire occupée par le DOM
La copie de code est la suivante:
document.getElementById ("test"). innerhtml = "";
La définition de l'InnerHTML de l'élément DOM sur une chaîne vide peut libérer la mémoire occupée par ses éléments enfants.
Libérez l'objet JavaScript
La copie de code est la suivante:
//Objet:
obj = null
// Propriétés d'objet:
supprimer obj.property
// Éléments de tableau:
Arr.splice (0,3); // Supprimer les 3 premiers éléments