Quelques connaissances pour améliorer efficacement l'efficacité de l'exécution de JavaScript_compétences javascript

Afin de fournir une expérience utilisateur nouvelle et unique, de nombreux sites Web utilisent JavaScript pour améliorer la conception, valider les formulaires, vérifier les navigateurs, les requêtes Ajax, les opérations de cookies, etc., afin d'obtenir des effets dynamiques sans actualisation. Cependant, une grande quantité de contenu doit être restituée dans le navigateur, et s'il n'est pas géré correctement, les performances du site Web chuteront considérablement. Nous devons donc comprendre comment améliorer l’efficacité d’exécution de JavaScript.

Fonction JavaScript

En JavaScript, les fonctions sont précompilées avant utilisation. Bien que parfois des chaînes puissent être utilisées à la place de fonctions, ce code JavaScript sera réanalysé à chaque exécution, affectant les performances.

1. exemple d'évaluation

Copier le code Le code est le suivant :

eval('output=(input * input)');
// Il est recommandé de le changer par :
eval(new function() { output=(input * input)});

2. Exemple setTimeout

Copier le code Le code est le suivant :

setTimeout("alerte(1)", 1000);
// Il est recommandé de le changer par :
setTimeout(function(){alert(1)}, 1000);

L'utilisation de fonctions au lieu de chaînes comme paramètres garantit 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 le chaînage de portées afin d’en tirer parti.

Copier le code Le code est le suivant :

var localVar = "global"; //Variable globale

test de fonction() {

var localVar = "local"; //variable locale

//Variables locales
alerte(localVar);

//Variables globales
alert(this.localVar);

//Si le document est introuvable dans les variables locales, recherchez les variables globales
var pageName = document.getElementById("pageName");
>

L'utilisation de variables locales est beaucoup plus rapide que l'utilisation de variables globales car la résolution est d'autant plus lente que l'on avance dans la chaîne de portée. La figure suivante montre la structure de la chaîne de portée :

S'il y a des instructions with ou try-catch dans le code, la chaîne de portée sera plus compliquée, comme indiqué ci-dessous :

Chaîne JavaScript

Une fonction en JavaScript qui affecte grandement les performances est la concaténation de chaînes. Généralement, les symboles sont utilisés pour assembler des chaînes. Cependant, les premiers navigateurs n'optimisaient pas cette méthode de connexion, ce qui entraînait la création et la destruction continues de chaînes réduisant considérablement l'efficacité de l'exécution de JavaScript.

Copier le code Le code est le suivant :

var txt = "bonjour" " " "monde";

Il est recommandé de le changer par :

Copier le code Le code est le suivant :

var o = [];
o.push("bonjour");
o.push(" ");
o.push("monde");
var txt = o.join();

Résumons-le simplement :

Copier le code Le code est le suivant :

fonction StringBuffer(str) {
var arr = [];
arr.push(str || "");
This.append = function(str) {
arr.push(str);
         renvoie ceci ;
};
This.toString = function() {
          return arr.join("");
};
};

Alors appelez-le comme ceci :

Copier le code Le code est le suivant :

var txt = nouveau StringBuffer();
txt.append("Bonjour");
txt.append(" ");
txt.append("Monde");
alert(txt.toString());

Manipulation JavaScript DOM

Le modèle objet de document HTML (DOM) définit un moyen standard d'accéder et de manipuler des documents HTML. Il représente un document HTML sous la forme d'une arborescence de nœuds contenant des éléments, des attributs et du contenu textuel. En utilisant le DOM HTML, JavaScript peut accéder à tous les nœuds d'un document HTML et les manipuler.

Redessiner le DOM

Chaque fois que l'objet DOM de la page est modifié, cela implique un redessin du DOM et le navigateur restituera la page. Par conséquent, réduire le nombre de modifications des objets DOM peut améliorer efficacement les performances de JavaScript.

Copier le code Le code est le suivant :

pour (var je = 0; je < 1000; je ) {
var elmt = document.createElement('p');
elmt.innerHTML = i;
document.body.appendChild(elmt);
>

Il est recommandé de le changer par :

Copier le code Le code est le suivant :

varhtml = [];
pour (var je = 0; je < 1000; je ) {
html.push('

' i '

');
>
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 recherché et accessible à nouveau. Par conséquent, la mise en cache des nœuds DOM trouvés peut également améliorer les performances de JavaScript.

Copier le code Le code est le suivant :

document.getElementById("p2").style.color = "bleu";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "plus grand";

Il est recommandé de le changer par :

Copier le code Le code est le suivant :

var elmt = document.getElementById("p2");
elmt.style.color = "bleu";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "plus grand";

Parcours DOM

La traversée DOM des éléments enfants lit généralement l'élément enfant suivant dans une boucle en fonction de l'index. Dans les premiers navigateurs, cette méthode de lecture a une très faible efficacité d'exécution. La méthode nextSibling peut être utilisée pour améliorer l'efficacité de js traversant le DOM.

Copier le code Le code est le suivant :

varhtml = [];
var x = document.getElementsByTagName("p");//Tous les nœuds
pour (var i = 0; i < x.length; i ) {
//à faire
>

Il est recommandé de le changer par :

Copier le code Le code est le suivant :

varhtml = [];
var x = document.getElementById("div");//Nœud supérieur
var node = x.firstChild;
while(noeud ​​!= null){
//à faire
node = node.nextSibling;
>

Libération 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 importante. Par conséquent, la référence à l'objet doit être libérée à temps afin que le navigateur puisse récupérer la mémoire.

Libérer la mémoire occupée par DOM

Copier le code Le code est le suivant :

document.getElementById("test").innerHTML = "";

Définissez le innerHTML d'un élément DOM sur une chaîne vide pour libérer la mémoire occupée par ses éléments enfants.

Libérer l'objet javascript

Copier le code Le code est le suivant :

//Objet :
obj = nul
//Propriétés de l'objet :
supprimer obj.property
//Éléments du tableau :
arr.splice(0,3);//Supprimer les 3 premiers éléments