Résumé de l'amélioration de l'efficacité de l'exécution de JS

Cette fois, je vais vous apporter un résumé de l'amélioration de l'efficacité de l'exécution de JS et quelles sont les précautions pour améliorer l'efficacité de l'exécution de JS. Voici des cas pratiques, jetons un coup d'oeil.

1. Utilisez des symboles logiques && ou || pour faire des jugements conditionnels

var foo = 10; 
foo == 10 && doSomething(); // 如果 foo == 10 则执行 doSomething(); 
foo == 5 || doSomething(); // 如果 foo != 5 则执行doSomething();

"||" Valeur par défaut du paramètre de fonction

Function doSomething(arg1){ 
 Arg1 = arg1 || 10; // 如果 arg1为设置那么 Arg1=10
}

2 Utilisez la méthode map() pour parcourir le tableau .

var squares = [1,2,3,4].map(function (val) { 
 return val * val; 
}); 
// 运行结果为 [1, 4, 9, 16]

3. Arrondi aux décimales

var num =2.443242342; 
num = num.toFixed(4); // 保留四位小数位 2.4432

4.

0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // = 9007199254740992 
9007199254740992 + 2 // = 9007199254740994

0,1+0,2 est égal à 0,30000000000000004. Pourquoi cela se produit-il ? Selon la norme IEEE754, tout ce que vous devez savoir est que tous les nombres JavaScript sont représentés sous forme de nombres à virgule flottante en binaire 64 bits. Les développeurs peuvent utiliser les méthodes toFixed() et toPrecision() pour résoudre ce problème.

5. Utilisez la boucle for-in pour vérifier les propriétés de l'objet traversé

Le code suivant sert principalement à éviter de traverser les propriétés de l'objet.

for (var name in object) { 
 if (object.hasOwnProperty(name)) { 
  // 执行代码
 } 
}

6. Opérateur virgule

var a = 0; 
var b = ( a++, 99 ); 
console.log(a); // a 为 1 
console.log(b); // b 为 99

7. Lors de l'utilisation des sélecteurs jQuery, les développeurs peuvent mettre en cache les éléments DOM

var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');

8 Transmettez les paramètres à isFinite() Validez avant

isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10); // true 
isFinite(undifined); // false 
isFinite(); // false 
isFinite(null); // true !!!

9. Évitez l'indexation négative dans les tableaux

Assurez-vous que les paramètres transmis à la méthode indexOf() ne sont pas négatif.

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ; // from is equal to -1 
numbersArray.splice(from,2); // will return [5]

10. Sérialisation et désérialisation (à l'aide de JSON)

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
var stringFromPerson = JSON.stringify(person); 
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ 
var personFromString = JSON.parse(stringFromPerson); 
/* personFromString is equal to person object */

11. Le constructeur de fonction

eval() et le constructeur de fonction sont appelés moteurs de script à chaque fois qu'ils sont exécutés, le code source doit être converti en code exécutable.

var func1 = new Function(functionCode); 
var func2 = eval(functionCode);

12. Évitez d'utiliser la méthode with()

Si vous utilisez with() pour insérer des variables dans la zone globale, puis, une fois qu'une variable porte le même nom, il est facile de la confondre et de la remplacer.

13. Évitez d'utiliser une boucle for-in dans un tableau

utilisez-la plutôt comme ceci :

comme ceci serait mieux :

var sum = 0; 
for (var i in arrayNumbers) { 
 sum += arrayNumbers[i]; 
}

Parce que i et len ​​sont les premières instructions de la boucle, elles seront exécutées une fois pour chaque instanciation, donc l'exécution sera plus rapide que la suivante :

var sum = 0; 
for (var i = 0, len = arrayNumbers.length; i < len; i++) { 
 sum += arrayNumbers[i]; 
}

Pourquoi ? La longueur du tableau, arrayynNumbers, est recalculée à chaque itération de boucle.

for (var i = 0; i < arrayNumbers.length; i++)

14. Ne transmettez pas de chaînes aux méthodes setTimeout() et setInterval()

Si vous transmettez des chaînes à ces deux méthodes, alors la chaîne sera recalculée comme eval, ce qui sera plus lent Au lieu de l'utiliser comme ceci :

Au lieu de cela, elle devrait être utilisée comme ceci :

setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

.

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

15. Utilisez des instructions switch/case au lieu d'instructions if/else plus longues

S'il y a plus de 2 cas, alors l'utilisation de switch/case sera beaucoup plus rapide, et le code semble plus élégant.

16. Lorsque vous rencontrez une plage numérique, vous pouvez utiliser switch/casne

function getCategory(age) { 
 var category = ""; 
 switch (true) { 
  case isNaN(age): 
   category = "not an age"; 
   break; 
  case (age >= 50): 
   category = "Old"; 
   break; 
  case (age <= 20): 
   category = "Baby"; 
   break; 
  default: 
   category = "Young"; 
   break; 
 }; 
 return category; 
} 
getCategory(5); // 返回 "Baby"

17.

Créer un objet dont les propriétés sont un objet donné Vous pouvez écrire une fonction comme celle-ci pour créer un objet dont les propriétés sont un objet donné, comme ceci :

function clone(object) { 
 function OneShotConstructor(){}; 
 OneShotConstructor.prototype= object; 
 return new OneShotConstructor(); 
} 
clone(Array).prototype ; // []

18. Une fonction d'échappement HTML

function escapeHTML(text) { 
 var replacements= {"<": "<", ">": ">","&": "&", "\"": """};      
 return text.replace(/[<>&"]/g, function(character) { 
  return replacements[character]; 
 }); 
}

19. Dans un éviter d'utiliser try-catch-finally

en boucle

try-catch-finally在当前范围里运行时会创建一个新的变量，在执行catch时，捕获异常对象会赋值给变量。
不要这样使用：

var object = ['foo', 'bar'], i; 
for (i = 0, len = object.length; i <len; i++) { 
 try { 
  // 执行代码，如果出错将被捕获
 } 
 catch (e) {  
  // 获取错误，并执行代码
 } 
}

应该这样使用：

var object = ['foo', 'bar'], i; 
try { 
 for (i = 0, len = object.length; i <len; i++) { 
  // 执行代码，如果出错将被捕获
 } 
} 
catch (e) {  
 // 获取错误，并执行代码
}

20.给XMLHttpRequests设置timeouts

如果一个XHR需要花费太长时间，你可以终止链接（例如网络问题），通过给XHR使用setTimeout()解决。

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () { 
 if (this.readyState == 4) { 
  clearTimeout(timeout); 
  // 执行代码
 } 
} 
var timeout = setTimeout( function () { 
 xhr.abort(); // call error callback 
}, 60*1000 /* 设置1分钟后执行*/ ); 
xhr.open('GET', url, true); 
 
xhr.send();

此外，通常你应该完全避免同步Ajax调用。

21.处理WebSocket超时

一般来说，当创建一个WebSocket链接时，服务器可能在闲置30秒后链接超时，在闲置一段时间后，防火墙也可能会链接超时。

为了解决这种超时问题，你可以定期地向服务器发送空信息，在代码里添加两个函数：一个函数用来保持链接一直是活的，另一个用来取消链接是活的，使用这种方法，你将控制超时问题。

添加一个timeID……

var timerID = 0; 
function keepAlive() { 
 var timeout = 15000; 
 if (webSocket.readyState == webSocket.OPEN) { 
  webSocket.send(''); 
 } 
 timerId = setTimeout(keepAlive, timeout); 
} 
function cancelKeepAlive() { 
 if (timerId) { 
  cancelTimeout(timerId); 
 } 
}

keepAlive()方法应该添加在WebSocket链接方法onOpen()的末端，cancelKeepAlive()方法放在onClose()方法下面。

22.记住，最原始的操作要比函数调用快

对于简单的任务，最好使用基本操作方式来实现，而不是使用函数调用实现。
例如

var min = Math.min(a,b); 
A.push(v);

基本操作方式：

var min = a < b ? a b; 
A[A.length] = v;

23.编码时注意代码的美观、可读

JavaScript是一门非常好的语言，尤其对于前端工程师来说，JavaScript执行效率也非常重要。

我们在编写JavaScript程序时注意一些小细节，掌握一些常用的实用小技巧往往会使程序更简捷，程序执行效率更高

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS中时间单位比较的方法

JS操作JSON详细介绍

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!