Explication détaillée et résumé de plusieurs points de connaissances pour améliorer les performances JavaScript

Résumé détaillé de plusieurs points de connaissances pour améliorer les performances de JavaScript :

J'ai passé du temps à lire la majeure partie du livre "JavaScript haute performance" certains il y a quelques temps, j'ai publié des livres, puis j'ai commencé à travailler sur des projets. Je suis heureux que la semaine la plus chargée soit passée. Par manque de temps, je n'ai pas écrit beaucoup de notes d'étude ce mois-ci. Après la semaine la plus pénible, j'ai passé les deux dernières nuits à lire le soir... J'ai finalement arrêté ce livre de mon vivant...

Maintenant que vous avez fini de lire, vous devez apprendre quelque chose. Permettez-moi d'abord de parler de mon point de vue sur ce livre. Dans l'ensemble, le contenu est bon, mais il semble un peu vieux (en tant que novice du front-end, il se peut que mon propre niveau soit limité et que je n'arrive pas à comprendre le vrai sens). . Au cours de la lecture de ce livre, j'ai également écrit beaucoup de code pour tester. J'ai également effectué un suivi des points d'arrêt sur l'exécution de la méthode d'écriture préconisée dans ce livre et de la méthode d'écriture populaire originale, afin de comprendre les problèmes qui peuvent survenir. réellement mesuré. Bien sûr, si vous ne pouvez pas le voir même si vous définissez un point d'arrêt et suivez l'exécution, vous ne pouvez rien y faire. Concernant les points de connaissance du livre, voici juste un bref résumé de certains des points de connaissance que je recommande personnellement. Bien sûr ~ ne critiquez pas si vous ne l'aimez pas.

Pour l'emplacement de chargement des fichiers js

Dans les fichiers HTML, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a ;corps> ; régional. Compte tenu de la raison pour laquelle l'exécution de JavaScript et le rendu de l'interface utilisateur sont basés sur un seul thread, si le fichier js est chargé, il bloquera le processus d'analyse ultérieur de la page. La page attendra que le fichier js soit complètement chargé et exécuté avant de continuer à s'exécuter. l'opération. Alors le problème survient, la page peut être vierge ou bloquée. En tant que développeur front-end, il est important non seulement de comprendre les exigences, mais également d'offrir une expérience utilisateur de haute qualité. Ensuite, nous devons éliminer l'attente ennuyeuse des utilisateurs. Pour résoudre ce problème, voici deux solutions auxquelles j'ai pensé :

1 Si le fichier js n'a pas d'exigences particulières, il doit être rendu sur la page. S'il a déjà été chargé et compilé, choisissez de placer le fichier js devant la balise 36cc49f0c466276486e50c850b7e4956 css dans la zone 93f0f5c25f18dab9d176bd4f6de5d30e (personne ne veut le voir) Une page avec une mise en page encombrée). Cela permettra aux utilisateurs de voir une page de mise en page au lieu d'une page vierge. Ensuite, certaines personnes feront remarquer : Les données doivent être chargées via des requêtes js. Que dois-je faire ? Le chargement des données peut être trié. Les interfaces dont on a un besoin urgent peuvent être exécutées en premier. Celles qui ne sont pas vraiment nécessaires peuvent être différées et une simple animation ou invite de chargement peut être créée en même temps.

2. Si ces fichiers js précisent qu'ils doivent être exécutés en premier pour mieux afficher le contenu de la page, alors mettez une petite animation de chargement sur le premier js ou la première page, vous pouvez avoir. quelques scènes animées intéressantes ou mignonnes. Cela peut également mieux éviter l'ennui d'attendre les utilisateurs. Peut-être qu'ils seront plus intéressés par l'animation de chargement, ce qui peut améliorer l'expérience utilisateur du projet.

Recommandation finale : Placez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a autant que possible devant la balise 36cc49f0c466276486e50c850b7e4956

Pour la fusion de fichiers js

Dans de nombreux développements en équipe, nous pouvons placer des blocs de code avec différentes fonctions dans différents fichiers js pour faciliter la coopération de chacun dans l'écriture du code pendant le processus de développement. être plus pratique, après tout, il vous suffit de trouver le dossier ou le fichier correspondant au lieu de trouver une méthode dans un long fichier. Cela améliorera en effet l'efficacité du développement de l'équipe et permettra aux nouvelles personnes d'effectuer plus facilement le développement secondaire et la maintenance après leur arrivée. Alors que diriez-vous d’intégrer ce problème dans les performances des pages ? C'est exactement le problème, comme indiqué dans le livre : chaque requête HTTP entraîne une surcharge de performances supplémentaire, donc le téléchargement d'un seul fichier de 100 Ko sera plus rapide que le téléchargement de quatre fichiers de 25 Ko.

Le téléchargement d'un fichier de 100 Ko est plus rapide que de télécharger quatre fichiers de 25 Ko, et il est très avantageux de distinguer chaque fichier pendant le processus de développement, donc le problème de la fusion sera traité une fois le développement terminé, je pense que cette opération sera familière à tout le monde. Il y a tellement d'outils frontaux maintenant, alors utilisez simplement la compression à laquelle vous êtes habitué ~
Voici une brève mention, vous pouvez également utiliser les attributs defer et async lors du chargement de fichiers, pour un chargement retardé et un chargement asynchrone dans les versions modernes. navigateurs, la plupart d'entre eux prennent déjà en charge l'attribut defer. Je n'ai pas encore l'habitude de l'utiliser et je ne sais pas s'il y aura des problèmes spécifiques. Les amis intéressés peuvent rechercher eux-mêmes ce point de connaissances sur Google, et je le mentionnerai brièvement ici.

La plupart des frameworks actuels prennent également en charge le chargement différé et le chargement à la demande.

Accès plus rapide aux données

Pour le navigateur, plus un identifiant se situe en profondeur, plus il sera lent à le lire et à l'écrire (pour ce point, la chaîne de prototypes est également vraie). Cela ne devrait pas être difficile à comprendre. Une analogie simple est la suivante : plus l'épicerie est éloignée de chez vous, plus il vous faut de temps pour préparer la sauce soja... Espèce de vilain enfant, si vous mettez autant de temps à préparer la sauce soja, le les légumes seront brûlés -.-~

Si nous devons utiliser une valeur de variable plusieurs fois dans la fonction actuelle, nous pouvons d'abord utiliser une variable locale pour la stocker. Le cas est le suivant :

  //修改前
  function showLi(){
      var i = 0;
      for(;i<document.getElementsByTagName("li").length;i++){    //一次访问document
          console.log(i,document.getElementsByTagName("li")[i]);  //三次访问document
      };
  };
  //修改后
  function showLi(){
      var li_s = document.getElementsByTagName("li");  //一次访问document
      var i = 0;
      for(;i<li_s.length;i++){
          console.log(i,li_s[i]);  //三次访问局部变量li_s
      };
  };

Optimisation des opérations DOM

Comme nous le savons tous, les opérations DOM consomment beaucoup plus de performances que l'exécution de JavaScript. Bien que nous ne puissions pas éviter d'utiliser DOM, nous pouvons essayer de réduire la consommation de performances de cette opération. .

Expliquons ce problème à travers le code :

  function innerLi_s(){
      var i = 0;
      for(;i<20;i++){
          document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
      };
  };

Une réécriture de la méthode ci-dessus :

  function innerLi_s(){
      var content ="";
      var i = 0;
      for(;i<20;i++){
          content += "A";  //这里只对js的变量循环了20次
      };
      document.getElementById("Num").innerHTML += content;  //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
  };

Réduire le redessinage et la redistribution de Dom

Les modifications dans la disposition des éléments, les ajouts, les suppressions ou les modifications du contenu ou de la taille de la fenêtre du navigateur entraîneront une redistribution et la police Les modifications apportées à la couleur ou à la couleur d’arrière-plan entraîneront un redessin.

Pour des opérations similaires au code suivant, on dit que la plupart des navigateurs modernes ont été optimisés (optimisés en 1 version réorganisée) :

  //修改前
  var el = document.getElementById("p");
  el.style.borderLeft = "1px"; //1次重排版
  el.style.borderRight = "2px"; //又1次重排版
  el.style.padding = "5px"; //还有1次重排版
  //修改后
  var el = document.getElementById("p");
  el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

Pour plusieurs opérations, les trois méthodes suivantes peuvent également réduire le nombre de reflows et de redraws :

1. Dom est masqué d'abord, puis affiché 2 reflows après l'opération (affichage temporaire : aucun)

2.document.createDocumentFragment() Créez un traitement de fragment de document, ajoutez-le à la page et réorganisez-le une fois

3.var newDOM = oldDOM.cloneNode(true) Créez une copie Dom, modifiez la copie oldDOM.parentNode . replaceChild(newDOM,oldDOM) écrase le DOM d'origine et le réorganise deux fois

Optimisation de la boucle

Cela devrait être une méthode d'écriture que beaucoup de gens connaissent, et vous pouvez simplement la parcourir (cela sera encore utilisé plus tard) Description du format de commentaire du code)~

  //修改前
  var i = 0;
  for(;i<arr.lengthli++){  //每次循环都需要获取数组arr的length
      console.log(arr[i]);
  }
  //修改后
  var i = 0;
  var len = arr.length;  //获取一次数组arr的length 
  for(;i<len;i++){
      console.log(arr[i]);
  }
  //or
  var i = arr.length;;
  for(;i;i--){
      console.log(arr[i]);
  }

Utilisation raisonnable du binaire

Par exemple : modulo 2, le plus bas Le bit le plus bas d'un nombre pair est 0, le bit le plus bas d'un nombre impair est 0 et le résultat d'une opération ET au niveau du bit avec 1 est 0. Le bit le plus bas d'un nombre impair est 1 et le résultat d'une opération ET au niveau du bit avec 1 est 1.

Le code est le suivant :

  .odd{color:red}
  .even{color:yellow}

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

  var i = 0;
  var lis = document.getElementsByTagName("li");
  var len = lis.length;
  for(;i<len;i++){
      if(i&1){
          lis[i].className = "even";
      } else{
          lis[i].className = "odd";
      }
  };

Bien que les navigateurs modernes aient fait du bon travail, je pense que c'est ma quête de la qualité du code. Et peut-être que ne pas prêter attention à un ou deux points n'aura pas beaucoup d'impact sur les performances, mais après avoir optimisé à partir de plusieurs points, cela peut produire un saut qualitatif ~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!