Zusammenfassung der Verbesserung der JS-Ausführungseffizienz

Dieses Mal werde ich Ihnen eine Zusammenfassung der Verbesserung der JS-Ausführungseffizienz und der Vorsichtsmaßnahmen zur Verbesserung der JS-Ausführungseffizienz geben. Hier sind praktische Fälle, werfen wir einen Blick darauf.

1. Verwenden Sie logische Symbole && oder ||, um

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

zu erstellen

Standardwert des Funktionsparameters

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

2. Verwenden Sie die Methode „map()“, um das Array zu durchlaufen

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

3. Auf Dezimalstellen runden

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

4. Gleitkommaproblem

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

0,1+0,2 entspricht 0,30000000000000004. Warum passiert das? Gemäß dem IEEE754-Standard müssen Sie lediglich wissen, dass alle JavaScript-Zahlen als Gleitkommazahlen in 64-Bit-Binärform dargestellt werden. Entwickler können dieses Problem mit den Methoden toFixed() und toPrecision() lösen.

5. Verwenden Sie die For-In-Schleife, um die durchlaufenen Objekteigenschaften zu überprüfen

Der folgende Code dient hauptsächlich dazu, das Durchlaufen von Objekteigenschaften zu vermeiden.

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

6. Komma-Operator

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

7. Cache-Variablen berechnen oder abfragen

Bei Verwendung von jQuery-Selektoren können Entwickler DOM-Elemente zwischenspeichern

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

8. Übergeben Sie die Parameter an isFinite(). Validieren Sie vor

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

9. Vermeiden Sie negative Indizierung in Arrays

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

Stellen Sie sicher, dass die an die indexOf()-Methode übergebenen Parameter nicht Negativ.

10. Serialisierung und Deserialisierung (mit 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. Vermeiden Sie die Verwendung von eval() oder Der Funktionskonstruktor

eval() und der Funktionskonstruktor werden als Skript-Engines bezeichnet. Bei jeder Ausführung muss der Quellcode in ausführbaren Code umgewandelt werden.

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

12. Vermeiden Sie die Verwendung der with()-Methode

Wenn Sie with() zum Einfügen von Variablen im globalen Bereich verwenden, Sobald eine Variable denselben Namen hat, kann es leicht zu Verwechslungen und Überschreibungen kommen.

13. Vermeiden Sie die Verwendung einer For-In-Schleife in einem Array

und verwenden Sie sie stattdessen wie folgt:

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

so wäre es besser:

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

Da i und len die ersten Anweisungen in der Schleife sind, werden sie einmal für jede Instanziierung ausgeführt, sodass die Ausführung schneller ist als die folgenden:

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

Warum? Die Array-Länge arrayynNumbers wird bei jeder Schleifeniteration neu berechnet.

14. Übergeben Sie keine Zeichenfolgen an die Methoden setTimeout() und setInterval()

Wenn Sie Zeichenfolgen an diese beiden Methoden übergeben, dann Die Zeichenfolge wird wie eval neu berechnet, was langsamer ist, anstatt sie wie folgt zu verwenden:

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

Stattdessen sollte sie wie folgt verwendet werden:

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

15. Verwenden Sie switch/case-Anweisungen anstelle längerer if/else-Anweisungen

Wenn es mehr als 2 Fälle gibt, ist die Verwendung von switch/case viel schneller und der Code sieht eleganter aus.

16. Wenn Sie auf einen numerischen Bereich stoßen, können Sie switch/casne verwenden

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. Erstellen Sie ein Objekt , dessen Eigenschaften ein bestimmtes Objekt sind

Sie können eine Funktion wie diese schreiben, um ein Objekt zu erstellen, dessen Eigenschaften ein bestimmtes Objekt sind, etwa so:

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

18. Eine HTML-Escaper-Funktion

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

19. Vermeiden Sie die Verwendung von try-catch-finally in Schleife

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详细介绍

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verbesserung der JS-Ausführungseffizienz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!