Spécifications du code JavaScript et finition des performances

1. Performance

Il y a beaucoup de choses auxquelles il faut prêter attention en termes de performances de Js :

• Évitez la recherche globale

La chose la plus importante pour optimiser les performances de Js est de prêter attention à la recherche globale, car la recherche de portée consiste d'abord à rechercher la portée locale, puis à accéder à la portée de niveau supérieur pour rechercher jusqu'à ce que la portée globale ne soit pas trouvée, donc les performances La consommation de la recherche de portée globale doit être supérieure à La portée locale de cette fonction consomme beaucoup d'argent. Par exemple:

function setInnerHtml(){  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i<len;i++){

    pDom.innerHTML=doucument.getElementByid(“dom”).innerHtml+I;

}

}

​

Ce code appelle document.getElementByid("dom") dans une boucle, et le document n'est exécuté qu'une seule fois en dehors de la boucle, il n'est donc pas nécessaire d'attribuer le document à une variable locale. Au lieu de cela, attribuez la valeur à l'intérieur de la boucle à une. variable locale, il n'est donc pas nécessaire de ressaisir la boucle à chaque fois pour trouver l'objet document global.

function setInnerHtml(){  var domhtml= doucument.getElementByid(“dom”).innerHtml;  var pDom=doucument.getElementsByTagName(“p”);  for(var i=0,len=pDom.lemgth;i<len;i++){

    pDom.innerHTML= domhtml +I;

}

}

​

Le principe est que lorsque l'objet global est appelé plusieurs fois, notamment dans une boucle, l'objet global est finalement affecté à la variable locale. Bien entendu, la différence de performances ne sera pas évidente après des dizaines d'appels, mais en tant que programmeur, puisque. Une écriture optimisée en termes de performances doit être effectuée autant que possible.

• Évitez avec des déclarations

Cette affirmation est rarement utilisée de nos jours, je n’en dirai donc pas plus.

• Évitez les recherches d'attributs inutiles

Pour faire simple, la variable stocke la valeur. La consommation de performances pour appeler cette variable est minime, tandis que la consommation de performances pour prendre la valeur de l'attribut de l'objet est relativement élevée. Par exemple:

var query=window.location.href.subtring(window.location.href.indexOf(“?”));

​

Il y a 6 fois dans ce code où l'efficacité de la recherche de propriété est particulièrement mauvaise. Il est préférable de le remplacer par :

var url=window.loaction.href;var query=url.substring(url.indexOf(“?”));

​

Cette optimisation améliore beaucoup l’efficacité.

• boucle d'optimisation

1) Diminuer l'itération : la plupart des boucles partent de 0 et augmentent la boucle. Dans de nombreux cas, il est plus efficace de diminuer la boucle à partir de la valeur maximale.

2) Simplifier les conditions de terminaison : étant donné que les conditions de terminaison seront évaluées à chaque boucle, la simplification des conditions de terminaison peut également améliorer l'efficacité de la boucle.

3) Simplifier le corps de la boucle : Le corps de la boucle est le plus exécuté, il faut donc assurer l'optimisation du corps de la boucle.

• Évitez d'analyser la chaîne de code js

Lors de l'analyse des chaînes de code js dans le code js, un analyseur doit être redémarré pour analyser le code, ce qui entraîne une consommation de performances relativement importante, essayez donc d'éviter les fonctions telles que l'évaluation et la construction de mots de code js.

Fonction de chaîne, lorsque setTimeout passe une chaîne.

• La méthode native est plus rapide, essayez donc d’utiliser la méthode native.

• L'instruction Switch est plus rapide.

• Les opérateurs de bits sont plus rapides.

2. Spécifications des codes

• Commentaires du code :

1) Fonctions et méthodes : chaque fonction ou méthode doit contenir des commentaires décrivant la fonction, l'entrée et la sortie de la fonction.

2) Algorithmes complexes : des commentaires doivent être ajoutés aux algorithmes complexes afin que les gens puissent comprendre la pensée logique de l'algorithme.

3) Hack : des commentaires doivent également être ajoutés au code de compatibilité.

4) Gros blocs de code : plusieurs lignes de code utilisées pour effectuer une seule tâche doivent être précédées d'un commentaire décrivant la tâche.

• Découplage HTML/JavaScript

HTML est la structure et js est la couche comportementale. Ils doivent intrinsèquement interagir lorsque nous écrivons du code, nous devrions essayer de réduire la corrélation entre HTML et JS. Certaines méthodes les rendront trop étroitement couplées, comme : js dans le. page html Déclarer le code js dans la balise script, lier les événements onclick dans la balise html et réécrire le code html dans js entraînera un couplage trop étroit entre HTML et js.

Le rendu HTML doit être séparé autant que possible de js. Lorsque js est utilisé pour insérer des données, essayez de ne pas insérer de balises directement. Généralement, vous pouvez directement inclure et masquer les balises dans la page, puis attendre que la page entière soit rendue. , puis utilisez js pour afficher la balise .

将html和js解耦可以在调试过程中节省时间，更加容易确定错误的来源，也减轻维护难度。

• 解耦css/JavaScript

JavaScript和css也是非常紧密相关的，js经常对页面的样式做动态修改。为了让他们的耦合更松散，可以通过js修改对应的class样式类。

• 解耦应用逻辑/事件处理程序

在实际开发中我们经常在一个事件函数出来将要处理的所有代码都放在这个事件中，例如：

function handleKeyPress(event){

   event=EventUtil.getTarget(event);   if(event.keyCode===13){var target=EventUtil.getTarget(event);var value=5*parseInt(target.value);if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

}

 

这里就是把逻辑处理代码和事件处理代码放到一起，这样会让调试不好调试，维护难度变高，而且要是突然修改要新增加一个事件做同样类似的逻辑处理，那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如：

function validateValue(value){

 value=5*parseInt(value); if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}function handleKeyPress(event){

  event=EventUtil.getEvent(event);  if(event.keyCode===13){   var target=EventUtil.getTarget(event);

   validateValue(target.value);

}

}

 

这样事件处理和逻辑处理就分离开了，这样做有几个好处，可以让你更容易更改触发特定过程的事件，其次可以在不附加到事件的情况下测试代码，使其更易创建单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则：

1. 勿将event对象传给其他方法；只传来着event对象中所需要的数据；

2. 任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。

3. 任何时间处理程序都应该处理事件，然后将处理转交给应用逻辑。

• 避免全局变量

这样会让脚本执行一致和可维护，最多创建一个全局变量。类似jQuery一样，所以方法属性都在$对象当中，避免对全局变量造成过多的污染。

• 尽量使用常量

数据和使用它的逻辑进行分离要注意一下几点：

1.  重复值

2. 用户界面字符串

3.  url

4. 任意可能会更改的值

• 其他优化

1. 多变量声明时用一条语句逗号隔开声明

2. 对dom的操作的优化

3. 对dom进行html代码插入尽量在最后一次添加到dom对象中。

4. innerHTML的效率要比appendChild的效率高，以为innerHTML会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用，由于内部方法是编译好的而非解释执行，所以执行快的多。

5. 使用事件委托减少绑定的事件数量。

6. 尽量少用到返回HTMLCollection语句。