Une brève introduction à l'efficacité de l'exécution de JavaScript

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 d'efficacité d'exécution et le processus de développement est dispersé. de nombreuses façons d'améliorer les performances du code et de résoudre les problèmes courants et faciles à éviter

L'efficacité d'exécution de Javascript

Chaîne de portée en Javascript,fermeture, héritage prototypique, évaluation, etc., tout en fournissant diverses fonctions magiques, entraînent également divers problèmes d'efficacité. Une utilisation imprudente entraînera une faible efficacité d'exécution.

1. Importation globale

Nous utiliserons des

variables globales (fenêtre, document, variables globales personnalisées, etc.), toute personne connaissant la chaîne de portée JavaScript sait que l'accès aux variables globales dans une portée locale nécessite de parcourir toute la chaîne de portée couche par couche jusqu'à la portée de niveau supérieur, tandis que l'efficacité d'accès aux variables locales sera plus rapide et plus élevée, donc 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 :

  //1、作为参数传入模块
  (function(window,$){
      var xxx = window.xxx;
      $("#xxx1").xxx();
      $("#xxx2").xxx();
  })(window,jQuery);

  //2、暂存到局部变量
  function(){
     var doc = document;
     var global = window.global;
 }

2, eval et problèmes de type eval

Nous savons tous que eval peut traiter une

chaîne en tant que 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, mais je suis intéressé. Les étudiants 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 étant les

attributs de l'objet actif, mais à ce moment les valeurs attribuées à ces variables sont toutes indéfinies, et ces fonctions définies avec function sont également ajoutées comme attributs de l'objet actif, et leurs valeurs sont corrects. C'est 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 considérablement réduites

En fait, les gens utilisent rarement eval maintenant. Ce dont je veux parler ici, ce sont deux scénarios de type eval (

,new Function{} . 🎜. >3. Libérez les variables qui ne sont plus référencées après la fermeture setTimeoutsetInterver

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. 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. En particulier, les références aux éléments DOM consommeront beaucoup de mémoire. Nous n'utilisons que la valeur. de la variable a en res, afin que nous puissions libérer d'autres variables avant le retour de la fermeture

setTimtout("alert(1)",1000);

setInterver("alert(1)",1000);

(new Function("alert(1)"))();

L'efficacité du dom d'exploitation Js

Dans le processus de développement web , le goulot d'étranglement de l'efficacité de l'exécution frontale est souvent

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它变量
    //***一些运算
    var res = function(){
        alert(a.name);
    }
    return res;
})()

l'opération dom

. Comment pouvons-nous économiser autant que possible les performances pendant l'opération DOM ?

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它变量
    //***一些运算
    //闭包返回前释放掉不再使用的变量
    b = c = null;
    var res = function(){
        alert(a.name);
        }
    return res;
})()

1. Réduire la refusion

Qu'est-ce que la refusion ?

Lorsque les attributs d'un élément DOM changent (comme la couleur), le navigateur demandera au rendu de repeindre l'élément correspondant. Ce processus est appelé repeindre. Si le changement implique la disposition des éléments (tels que

largeur

), le navigateur supprime les attributs d'origine, recalcule et transmet les résultats au rendu pour redessiner les éléments de la page.

Méthodes pour réduire la redistribution

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 élément et Lorsque ses éléments enfants subissent un grand nombre d'opérations de redistribution, les effets des méthodes 1 et 2 seront plus évidents)

Réglez l'

affichage

de l'élément sur " none" et complete Après modification, modifiez l'affichage à la valeur d'origine

1. Lors de la modification de plusieurs attributs de style, définissez une classe au lieu de modifier l'attribut de style plusieurs fois (
pour
2. recommandé par certains étudiants)
   Utilisez documentFragment

3. lors de l'ajout d'un grand nombre d'éléments à la page Par exemple, .

Le code ci-dessus fera fonctionner le dom plusieurs fois, ce qui est efficace. Il est relativement faible. Vous pouvez créer le documentFragment sous la forme suivante. L'ajout de tous les éléments au documentFragment ne modifiera pas la structure du dom. ajoutez-le à la page et effectuez une seule redistribution

4. var frag = document.createDocumentFragment();
   for(var i=0;i<100:i++){
           var child = docuemnt.createElement("li");
           child.innerHtml = "child";
       frag.appendChild(child);
   }
   document.getElementById("parent").appendChild(frag);

   2、暂存dom状态信息

   当代码中需要多次访问元素的状态信息，在状态不变的情况下我们可以将其暂存到变量中，这样可以避免多次访问dom带来内存的开销，典型的例子就是：

   var lis = document.getElementByTagName("li");
   for(var i=1;i<lis.length;i++){
       //***
   }
   上述方式会在每一次循环都去访问dom元素，我们可以简单将代码优化如下
   var lis = document.getElementByTagName("li");
   for(var i=1,j=lis.length ;i<j;i++){
       //***
   }

   3、缩小选择器的查找范围

   查找dom元素时尽量避免大面积遍历页面元素，尽量使用精准选择器，或者指定上下文以缩小查找范围，以jquery为例

   • 少用模糊匹配的选择器：例如$("[name*='_fix']")，多用诸如id以及逐步缩小范围的复合选择器$("li.active")等

   • 指定上下文：例如$("#parent .class")，$(".class",$el)等

   4、使用事件委托

   使用场景：一个有大量记录的列表，每条记录都需要绑定点击事件，在鼠标点击后实现某些功能，我们通常的做法是给每条记录都绑定监听事件，这种做法会导致页面会有大量的事件监听器，效率比较低下。

   基本原理：我们都知道dom规范中事件是会冒泡的，也就是说在不主动阻止事件冒泡的情况下任何一个元素的事件都会按照dom树的结构逐级冒泡至顶端。而event对象中也提供了event.target（IE下是srcElement）指向事件源，因此我们即使在父级元素上监听该事件也可以找到触发该事件的最原始的元素，这就是委托的基本原理。废话不多说，上示例

   $("ul li").bind("click",function(){
       alert($(this).attr("data"));
   })

   上述写法其实是给所有的li元素都绑定了click事件来监听鼠标点击每一个元素的事件，这样页面上会有大量的事件监听器。

   根据上面介绍的监听事件的原理我们来改写一下

   $("ul").bind("click",function(e){
       if(e.target.nodeName.toLowerCase() ==="li"){
           alert($(e.target).attr("data"));
       }
   })

   这样一来，我们就可以只添加一个事件监听器去捕获所有li上触发的事件，并做出相应的操作。

   当然，我们不必每次都做事件源的判断工作，可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

   语法是这样的$(selector).delegate(childSelector,event,data,function)，例如：

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

   参数说明（引自w3school）

   参数	描述
   childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
   event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
   data	可选。规定传递到函数的额外数据。
   function	必需。规定当事件发生时运行的函数。

    

   
   

   
   

   
   

   
   

   Tips:事件委托还有一个好处就是，即使在事件绑定之后动态添加的元素上触发的事件同样可以监听到哦，这样就不用在每次动态加入元素到页面后都为其绑定事件了

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

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!