Explorer les problèmes d'efficacité d'exécution de Javascript_Connaissances de base

Javascript est un langage très flexible.Nous pouvons écrire différents styles de code à notre guise.Différents styles de code entraîneront inévitablement des différences dans l'efficacité d'exécution, nous sommes sporadiquement exposés à de nombreuses méthodes d'amélioration des performances. , résolvez les problèmes courants et faciles à éviter

　L'efficacité d'exécution de Javascript
La chaîne de portée, la fermeture, l'héritage prototypique, l'évaluation et d'autres fonctionnalités de Javascript fournissent non seulement diverses fonctions magiques, mais entraînent également divers problèmes d'efficacité, si elles sont utilisées avec négligence, elles entraîneront une faible efficacité d'exécution.

　1. Importation mondiale
Nous utiliserons plus ou moins certaines variables globales (fenêtre, document, variables globales personnalisées, etc.) pendant le processus de codage. Quiconque comprend la chaîne de portée JavaScript sait que l'accès aux variables globales dans la portée locale nécessite une portée entière. La chaîne est parcourue couche par couche jusqu'à la portée de niveau supérieur, et l'efficacité d'accès aux variables locales sera plus rapide et plus élevée. Par conséquent, lorsque certains objets globaux sont fréquemment utilisés dans la portée locale, ils peuvent être importés dans la portée locale, par exemple. exemple :

Copier le code Le code est le suivant :

//1. Passer le module en paramètre
(fonction(fenêtre,$){
var xxx = fenêtre.xxx
$("#xxx1").xxx();
$("#xxx2").xxx();
})(fenêtre,jQuery);

//2. Stocker temporairement dans des variables locales
fonction(){
vardoc = document;
var global = window.global;
>

　2. Problèmes d'évaluation et de type évaluation
Nous savons tous que eval peut traiter une chaîne comme un code js. On dit que le code exécuté avec eval est plus de 100 fois plus lent que le code sans eval (je n'ai pas testé l'efficacité spécifique, les étudiants intéressés peuvent le tester)

Le code JavaScript effectuera une opération de "pré-compilation" similaire avant l'exécution : il créera d'abord un objet actif dans l'environnement d'exécution actuel et définira les variables déclarées avec var comme attributs de l'objet actif, mais à ce moment-là, celles-ci variables Les valeurs d'affectation sont toutes indéfinies, et les fonctions définies avec function sont également ajoutées en tant que propriétés de l'objet actif, et leurs valeurs sont exactement la définition de la fonction. Cependant, si vous utilisez "eval", le code dans "eval" (en fait une chaîne) ne peut pas reconnaître son contexte à l'avance et ne peut pas être analysé et optimisé à l'avance, c'est-à-dire que les opérations précompilées ne peuvent pas être effectuées. Par conséquent, ses performances seront également fortement réduites

En fait, les gens utilisent rarement eval de nos jours. Ce dont je veux parler ici, ce sont deux scénarios de type eval (new Function{}, setTimeout, setInterver)

Copier le code Le code est le suivant :

setTimtout("alerte(1)",1000);
setInterver("alerte(1)",1000);
(new Function("alert(1)"))();

L'efficacité d'exécution des types de codes ci-dessus sera relativement faible, il est donc recommandé de transmettre directement des méthodes anonymes ou des références de méthode à la méthode setTimeout

　3. Une fois la fermeture terminée, libérez les variables qui ne sont plus référencées

Copier le code Le code est le suivant :

var f = (fonction(){
var a = {nom:"var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagName("li");
//****Autres variables
//***Quelques opérations
var res = fonction(){
alert(a.name);
}
Retourner la résolution
})()

La valeur de retour de la variable f dans le code ci-dessus est la méthode res renvoyée dans la fermeture composée d'une fonction immédiatement exécutée. Cette variable conserve les références à toutes les variables (a, b, c, etc.) dans cette fermeture, donc. Ces deux variables résideront toujours dans l'espace mémoire, notamment la référence à l'élément dom, qui consommera beaucoup de mémoire. Cependant, nous n'utilisons que la valeur de la variable a en res, donc avant le retour de la fermeture, nous pouvons Release. autres variables

Copier le code Le code est le suivant :

var f = (fonction(){
var a = {nom:"var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagName("li");
//****Autres variables
//***Quelques opérations
// Libère les variables qui ne sont plus utilisées avant le retour de la fermeture
b = c = nul
var res = fonction(){
alert(a.name);
           }
Retourner la résolution
})()

L'efficacité du domaine d'exploitation Js
Dans le processus de développement Web, le goulot d'étranglement de l'efficacité de l'exécution frontale est souvent lié au fonctionnement du DOM, qui consomme beaucoup de performances. Comment pouvons-nous économiser autant que possible les performances pendant le fonctionnement du DOM ?

1. Réduire la refusion
Qu’est-ce que la refusion ?
Lorsque les propriétés d'un élément DOM changent (comme la couleur), le navigateur demandera au rendu de redessiner l'élément correspondant. Ce processus est appelé repeindre.

Si le changement implique la disposition des éléments (comme la largeur), le navigateur supprime les attributs d'origine, recalcule et transmet les résultats au rendu pour redessiner les éléments de la page. Ce processus est appelé redistribution.

Méthodes pour réduire la refusion
Supprimez d'abord l'élément du document, puis remettez l'élément à sa position d'origine après avoir terminé la modification (lorsqu'un grand nombre d'opérations de redistribution sont effectuées sur un élément et ses sous-éléments, les effets des méthodes 1 et 2 seront plus évident)
Réglez l'affichage de l'élément sur "aucun", puis modifiez l'affichage à la valeur d'origine après avoir terminé la modification
Lors de la modification de plusieurs attributs de style, définissez une classe au lieu de modifier plusieurs fois les attributs de style (recommandé pour certains étudiants)
Utilisez documentFragment
lors de l'ajout d'un grand nombre d'éléments à la page ​Par exemple

Copier le code Le code est le suivant :

pour(var i=0;i<100:i ){

var enfant = docuemnt.createElement("li");

child.innerHtml = "enfant";

document.getElementById("parent").appendChild(child);

}

Lorsque le code doit accéder plusieurs fois aux informations d'état d'un élément, nous pouvons le stocker temporairement dans une variable si l'état reste inchangé. Cela peut éviter la surcharge de mémoire causée par les accès multiples au DOM. Un exemple typique est : Lors de la recherche d'éléments DOM, essayez d'éviter de parcourir de grandes zones d'éléments de page, essayez d'utiliser des sélecteurs précis ou spécifiez un contexte pour restreindre la portée de la recherche, prenez jquery comme exemple

Utilisez des sélecteurs de correspondance moins flous : tels que $("[name*='_fix']"), et utilisez davantage des sélecteurs composés tels que id et rétrécissez progressivement la plage $("li.active"), etc.

Spécifiez le contexte : tel que $("#parent .class"), $(".class",$el), etc.

4. Utiliser la délégation d'événement

Scénario d'utilisation : une liste avec un grand nombre d'enregistrements. Chaque enregistrement doit être lié à un événement de clic pour implémenter certaines fonctions après un clic de souris. Notre approche habituelle consiste à lier un événement d'écoute à chaque enregistrement. page Il y aura un grand nombre d'écouteurs d'événements, ce qui sera inefficace.

Principe de base : nous savons tous que les événements dans la spécification DOM vont remonter, ce qui signifie que sans empêcher activement la propagation des événements, les événements de n'importe quel élément remonteront progressivement vers le haut en fonction de la structure de l'arborescence DOM. . L'objet événement fournit également event.target (srcElement sous IE) pour pointer vers la source de l'événement, donc même si nous écoutons l'événement sur l'élément parent, nous pouvons trouver l'élément d'origine qui a déclenché l'événement. C'est le principe de base de. délégation. Sans plus tarder, voici un exemple

En partant du principe de suivi des événements introduit ci-dessus, réécrivons-le

Bien sûr, nous n'avons pas besoin de juger la source de l'événement à chaque fois. Nous pouvons la résumer et la laisser à la classe d'outils. La méthode délégué() dans jquery implémente cette fonction

La syntaxe est comme ceci $(selector).delegate(childSelector, event, data, function), par exemple :

Copier le code Le code est le suivant :

$("div").delegate("button","click",function(){
$("p").slideToggle();
});

Description du paramètre (citée par w3school)
Description du paramètre
childSelector requis. Spécifie un ou plusieurs éléments enfants auxquels les gestionnaires d'événements sont attachés.
un événement est requis. Spécifie un ou plusieurs événements à attacher à l'élément. Plusieurs valeurs d'événement séparées par des espaces. Doit être un événement valide.
les données sont facultatives. Spécifie des données supplémentaires à transmettre à la fonction.
fonction requise. Spécifie une fonction à exécuter lorsqu'un événement se produit.
Conseils : Un autre avantage de la délégation d'événements est que même les événements déclenchés sur des éléments ajoutés dynamiquement après la liaison d'événements peuvent également être surveillés, vous n'avez donc pas besoin de lier des événements aux éléments à chaque fois qu'ils sont ajoutés dynamiquement à la page