Résumé des points de connaissances sur l'amélioration des compétences JavaScript performance_javascript

1. Emplacement de chargement des fichiers js

Dans les fichiers HTML, les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a peuvent être ajoutées à la zone 93f0f5c25f18dab9d176bd4f6de5d30e 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 de fournir 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 indiquant qu'il doit être chargé et compilé avant le rendu de la page, choisissez de placer le fichier js avant la balise 36cc49f0c466276486e50c850b7e4956 contenu présenté sur la page). Le fichier CSS est toujours placé dans la zone 93f0f5c25f18dab9d176bd4f6de5d30e (personne ne veut voir une page avec une mise en page désordonné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 qui sont nécessaires de toute urgence 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, qui peut être quelque chose d'intéressant ou de mignon. 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

2. Fusionner des 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, afin qu'il soit plus pratique pour tout le monde de travailler ensemble pour écrire du code pendant le processus de développement. Après tout, il nous suffit de trouver le dossier ou le fichier correspondant. au lieu de dans un Rechercher une méthode dans un document très long. 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 exposé 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 le téléchargement de quatre fichiers de 25 Ko, et il y a de grands avantages à distinguer chaque fichier pendant le processus de développement, donc la question de la fusion sera traitée une fois le développement terminé. familier à tout le monde, n'est-ce pas ? Il existe tellement d'outils frontaux maintenant, alors utilisez simplement la compression à laquelle vous êtes habitué ~
Permettez-moi de mentionner brièvement ici que vous pouvez également utiliser les attributs defer et async lors du chargement de fichiers pour un chargement paresseux et asynchrone. Dans les navigateurs modernes, la plupart d'entre eux prennent déjà en charge l'attribut defer. Je ne suis pas encore habitué à l'utiliser. 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 connaissance 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.

3. Accès plus rapide aux données

Pour le navigateur, plus la localisation d'un identifiant est profonde, plus sa lecture et son écriture seront lentes (il en est de même pour la chaîne de prototypes). Cela ne devrait pas être difficile à comprendre. Une analogie simple est la suivante : plus l'épicerie est loin de chez vous, plus il vous faut du temps pour faire de la sauce soja... Vilain, si vous mettez autant de temps à faire de la sauce soja, les légumes sera brûlé -.-~

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
   };
 };

4. 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'opérer sur DOM, nous pouvons essayer de réduire autant que possible la consommation de performances de cette opération.

Expliquons cela à travers le code :

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

Réécrivez 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的值，一次写入值
 };

5. Réduire le redessin et le réarrangement de Dom

Les modifications dans la disposition des éléments, les ajouts, les suppressions de contenu ou les modifications de la taille de la fenêtre du navigateur entraîneront une redistribution, tandis que les modifications de la couleur de la police ou de 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 de réarrangement) :

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

针对多重操作，以下三种方法也可以减少重排版和重绘的次数：

1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)

2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排

3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排

六、循环的优化

这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~

//修改前
 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]);
 }

七、合理利用二进制

如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。

代码如下：

 .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";
  }
 };

虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了

JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。