Tipps zur JavaScript-Leistungsoptimierung

JavaScript ist derzeit bereits die beliebteste Sprache. Sie kann viele Dinge tun – Website-Schnittstelle, Serverseite, Spiele, Betriebssysteme, Roboter und vieles mehr.

Doch um ehrlich zu sein: Auch wenn es so beliebt ist, hat seine Leistung noch nicht seine Grenzen erreicht. Ja, es verbessert sich, aber bis es in jeder Hinsicht mit nativen Apps mithalten kann, müssen Sie bei der Erstellung einer HYBIRD-App einige Tricks anwenden, um die Leistung zu optimieren.

Firefox verfügt derzeit über den schnellsten JavaScript-Parser SpiderMonkey.

Es gibt verschiedene Bemühungen, JavaScript schneller zu machen, darunter asm.js. Asm.js ist JavaScript. Es handelt sich um eine von Emscripten generierte Teilmenge . Es führt viele Optimierungen für aus C/C++ kompilierten Code durch, weshalb Sie keinen optimierten Code selbst schreiben können, aber er läuft sehr schnell. Ich empfehle Ihnen, diesen Artikel zu lesen

Hören Sie auf zu reden und geben Sie mir ein Beispiel

Okay, unser Ziel ist es, schnelleren JavaScript-Code zu schreiben. Hier sind einige Tipps, damit Ihr Code schneller läuft und bessere Speichereffizienz. Bitte beachten Sie, dass ich nicht ausschließlich über das DOM und Webanwendungen spreche, sondern über JavaScript, von dem das DOM nur ein Teil ist.

Sehen heißt glauben, ich möchte den jsperf-Testfall als ersten hinzufügen und dabei Firefox38- und Chrome39-Tests verwenden.

#1 Keine Typumwandlung

JavaScript wird dynamisch typisiert, aber verwenden Sie diese Funktion nicht, wenn Sie die Geschwindigkeit erhöhen möchten. Versuchen Sie, die Variablentypen konsistent zu halten. Dies gilt auch für Arrays. Obwohl sie größtenteils von Browsern optimiert werden, sollten Sie versuchen, Arrays verschiedener Typen nicht zu mischen. Dies ist einer der Gründe, warum in JavaScript kompilierter C/C++-Code statische Typisierung verwendet.

{
  var x = '2';
  var y = 5;
  x = 2;
  x + y;
}

Testfälle

Zusätzlich: Konvertierung zwischen String- und numerischen Typen

Zum Beispiel müssen Sie einen String in eine Zahl umwandeln, am häufigsten sind parseInt und parseFloat beliebt Gute Methode? mal sehen.

parseFloat("100")
+"100"
// 整型
parseInt("100", 10)
"100"|0
"100" >> 0
"100" << 0
// 仅适用于正数
"100" >>> 0

　 parseInt-Test ~ parseFloat-Test

Firefox ist für bitweise Operationen optimiert und führt Code etwa 99 % schneller aus als parseInt- und +-Operationen. Chrome bevorzugt offensichtlich keine bitweisen Operatoren, sie sind 62 % langsamer als die parseInt-Funktion.

ParseFloat ist in beiden Browsern schneller als der +-Operator (Firefox 28 %, Chrome 39 %).

Wenn Sie also eine Node/Chrome- oder Firefox-Anwendung schreiben? Meiner Meinung nach ist die Verwendung der parseInt-Funktion im Allgemeinen richtig.

#2 Objekte nicht umstrukturieren

Das Umstrukturieren von Objekten ist nicht billig und sollte vermieden werden:

Verwenden Sie keinen Löschoperator.

Der Löschvorgang ist besser als die Zuweisung einer Null. Eigenschaften sind viel langsamer. Das Zuweisen von Null ist in beiden Browsern 99 % schneller, kann jedoch die Struktur des Objekts nicht ändern, das Löschen jedoch schon.

Bearbeiten: Ich denke, das ist etwas irreführend. Das bedeutet nicht, dass Sie den Löschoperator nicht verwenden sollten. Der Löschoperator hat seinen eigenen Anwendungsfall. Er kann Speicherlecks von Objekten verhindern.

　delete vs null

　Attribute später nicht hinzufügen

Versuchen Sie, keine Attribute später hinzuzufügen. Definieren Sie die Struktur des Objekts am besten von Anfang an. Dies ist in Firefox 100 % schneller und in Chrome 89 % schneller.

Dynamische Attribute VS vordefinierte Strukturen

#3 String-Verkettung

String-Verkettung ist eine sehr teure Operation, aber welche Methode sollte verwendet werden? Sicherlich nicht Array.prototype.join.

Der +=-Operator scheint viel schneller zu sein als +, und String.prototype.concat und Array.prototype.join sind in beiden Browsern schneller. Array.prototype.join ist im Einklang mit den Markterwartungen am langsamsten.

String-Verkettungstest

#4 Korrekte Verwendung regulärer Ausdrücke

Die Verwendung von RegExp.prototype.exec ist nicht notwendig, oder?

Es gibt jedoch einen Leistungsunterschied zwischen RegExp.prototype.test und String.prototype.search. Mal sehen, welche Methode schneller ist:

Reguläre Ausdrucksmethode

RegExp. „prototype.exec“ ist viel schneller als „String.prototype.match“, aber ihre Unterschiede gehen über den Rahmen dieses Artikels hinaus.

RegEx.prototype.test ist schneller, wahrscheinlich weil es nicht den Index zurückgibt, in dem die Übereinstimmung gefunden wurde. String.prototype.search sollte nur verwendet werden, um den erforderlichen passenden Index zu finden.

Sie sollten jedoch keine regulären Ausdrücke verwenden, um die Position einer anderen Zeichenfolge zu ermitteln. Sie können die Methode String.prototype.indexOf verwenden.

String.prototype.search VS String.prototype.indexOf

　　另一个有趣的基准是String.prototype.indexOf VS RegExp.prototype.test，我个人预计后者要快，这是在Firefox中发生的事情，但在Chrome中，事实并非如此。 RegExp.prototype.test在Firefox中快32％，而在Chrome中String.prototype.indexOf快33％。在这种情况下，你自己选择喜欢的方式吧。

　　＃5限制声明/传递变量的范围（作用域）

　　假如你调用一个函数，浏览器必须做一些所谓的范围查找，它的昂贵程度取决于它要查找多少范围。尽量不要依辣全局/高范围的变量，尽量使局部范围变量，并将它们传递给函数。更少的范围查找，更少的牺牲速度。

　　这个测试告诉我们，从局部范围内传递和使用变量比从更高的声明范围查找变量快，无论是Chrome和Firefox。

　　内部范围VS高范围VS全局

　　＃6你不需要所有的东西都用jQuery

　　大多数开发者使用jQuery做一些简单的任务，我的意思在一些场合你没有必要使用jQuery，你觉得用$.val()始终是必要的吗？就拿这个例子：

$('input').keyup(function() {
    if($(this).val() === 'blah') { ... }
});

　　这是学习如何使用JavaScript修改DOM的最重要原因之一，这样你可以编写更高效的代码。

　　用纯JavaScript100％完成同样的功能100%的速度更快，这是JSPerf基准测试

$('input').keyup(function() {
  if(this.value === 'blah') { ... }
});