Schreiben Sie leistungsstarkes JavaScript

Die ursprüngliche Absicht dieses Artikels besteht darin, Ihnen vorzustellen, wie Sie mit einigen einfachen Codierungstipps JavaScript verbessern können Compiler Der Optimierungsprozess verbessert die Effizienz der Codeausführung. Insbesondere bei Spielen, bei denen die Geschwindigkeit der Speicherbereinigung hoch ist, sehen Benutzer bei etwas schlechterer Leistung einen weißen Bildschirm.

Monomorphismus: Monomorphismus

JavaScript ermöglicht die Übergabe dynamischer Parameter beim Aufrufen von Funktionen. Nehmen wir jedoch eine einfache 2-Parameter-Funktion als Beispiel, wenn Sie Ihren Parametertyp, die Anzahl der Parameter und den Rückgabetyp angeben Es kann nur bei dynamischem Aufruf bestimmt werden und der Compiler benötigt mehr Zeit zum Parsen. Compiler möchten natürlich in der Lage sein, mit monomorph vorhersehbaren Datenstrukturen, Parameterstatistiken usw. umzugehen.

function example(a, b) {
  // we expect a, b to be numeric
  console.log(++a * ++b);
};

example(); // bad
example(1); // still bad
example("1", 2); // dammit meg

example(1, 2); // good

Konstanten: Konstanten

Die Verwendung von Konstanten ermöglicht es dem Compiler, die Ersetzung von Variablenwerten während der Kompilierung abzuschließen:

const a = 42; // we can easily unfold this
const b = 1337 * 2; // we can resolve this expression
const c = a + b; // still can be resolved
const d = Math.random() * c; // we can only unfold 'c'

// before unfolding
a;
b;
c;
d;

// after unfolding
// we can do this at compile time!
42;
2674;
2716;
Math.random() * 2716;

Inlining: Inlining

The Der JIT-Compiler kann die am häufigsten ausgeführten Teile Ihres Codes finden. Durch die Aufteilung Ihres Codes in mehrere kleine Codeblöcke kann der Compiler diese Codeblöcke zur Kompilierungszeit in ein Inline-Format konvertieren.

Datentypen: Datentypen

Verwenden Sie so oft wie möglich Zahlen und Boolesche Werte, da sie eine bessere Leistung als andere primitive Typen wie Zeichenfolgen erbringen. Durch die Verwendung von Zeichenfolgentypen können zusätzliche Kosten für die Garbage Collection entstehen.

const ROBOT = 0;
const HUMAN = 1;
const SPIDER = 2;

let E_TYPE = {
  Robot: ROBOT,
  Human: HUMAN,
  Spider: SPIDER
};

// bad
// avoid uncached strings in heavy tasks (or better in general)
if (entity.type === "Robot") {
  
}

// good
// the compiler can resolve member expressions
// without much deepness pretty fast
if (entity.type === E_TYPE.Robot) {
  
}

// perfect
// right side of binary expression can even get unfold
if (entity.type === ROBOT) {
  
}

Strenge und abstrakte Operatoren

Verwenden Sie wann immer möglich den strengen Vergleichsoperator === anstelle des Operators ==. Durch die Verwendung strenger Vergleichsoperatoren kann verhindert werden, dass der Compiler Typableitungen und -konvertierungen durchführt, wodurch bestimmte Leistungen verbessert werden.

Strenge Bedingungen

Die if-Anweisung in JavaScript ist auch sehr flexibel. Sie können jeden ähnlichen Wert direkt in einer bedingten Auswahlanweisung des Typs if(a) then bla übergeben. In diesem Fall muss der Compiler sie jedoch genau wie die oben erwähnten strengen Vergleichsoperatoren und losen Vergleichsoperatoren zum Vergleich in mehrere Datentypen konvertieren, und die Ergebnisse können nicht sofort erhalten werden. Natürlich ist das kein blinder Widerstand gegen die Verwendung von Abkürzungen, aber in Szenarien, in denen großer Wert auf Leistung gelegt wird, empfiehlt es sich, jedes Detail zu optimieren:

let a = 2;

// bad
// abstracts to check in the worst case:
// - is value equal to true
// - is value greater than zero
// - is value not null
// - is value not NaN
// ..
if (a) {
 // if a is true, do something 
}

// good
if (a === 2) {
  // do sth 
}

// same goes for functions
function b() {
  return (!false);
};

if (b()) {
  // get in here slow
}

if (b() === true) {
  // get in here fast
  // the compiler knows a specific value to compare with
}

Argumente

Vermeiden Sie als Verwenden Sie so weit wie möglich die Methode arguments[index], um Parameter zu erhalten, und versuchen Sie, die Änderung der eingehenden Parametervariablen zu vermeiden:

function mul(a, b) {
  return (arguments[0]*arguments[1]); // bad, very slow
  return (a*b); // good
};

function test(a, b) {
  a = 5; // bad, dont modify argument identifiers
  let tmp = a; // good
  tmp *= 2; // we can now modify our fake 'a'
};

Toxizität: Diese Schlüsselwörter sind giftig

Toxizität

sind unten aufgeführt. Mehrere grammatikalische Merkmale von

• eval

• mit

• try/catch

Versuchen Sie gleichzeitig, die Deklaration von Funktionen oder Schließungen innerhalb von Funktionen zu vermeiden, da dies bei einer großen Anzahl von Vorgängen zu zu vielen Speicherbereinigungsvorgängen führen kann.

Objekte

Objektinstanzen teilen sich normalerweise implizite Klassen. Wenn wir also auf den Wert einer undefinierten Variablen einer Instanz zugreifen oder diesen festlegen, wird eine implizite Klasse erstellt.

// our hidden class 'hc_0'
class Vector {
  constructor(x, y) {
    // compiler finds and expects member declarations here
    this.x = x;
    this.y = y;
  }
};

// both vector objects share hidden class 'hc_0'
let vec1 = new Vector(0, 0);
let vec2 = new Vector(2, 2);

// bad, vec2 got hidden class 'hc_1' now
vec2.z = 0;

// good, compiler knows this member
vec2.x = 1;

Schleifen

Zwischenspeichern Sie den berechneten Wert der Array-Länge so weit wie möglich und speichern Sie einen einzelnen Typ so weit wie möglich im selben Array. Vermeiden Sie die Verwendung der for-in-Syntax zum Durchlaufen eines Arrays, da diese sehr langsam ist. Darüber hinaus ist die Leistung von continue- und break-Anweisungen in Schleifen ebenfalls gut, sodass Sie sich bei der Verwendung dieser Anweisungen keine Sorgen machen müssen. Teilen Sie außerdem kurze logische Teile so weit wie möglich in unabhängige Funktionen auf, was der Compileroptimierung förderlicher ist. Darüber hinaus kann die Verwendung von Präfix-Autoinkrement-Ausdrücken auch eine kleine Leistungsverbesserung bewirken. (++i statt i++)

let badarray = [1, true, 0]; // bad, dont mix types
let array = [1, 0, 1]; // happy compiler

// bad choice
for (let key in array) {
  
};

// better
// but always try to cache the array size
let i = 0;
for (; i < array.length; ++i) {
  key = array[i];
};

// good
let i = 0;
let key = null;
let length = array.length;
for (; i < length; ++i) {
  key = array[i];
};

drawImage

draeImage-Funktion ist eine der schnellsten 2D-Canvas-APIs, aber wir müssen darauf achten, ob alle Parameter aus Gründen des Interesses weggelassen werden Der Komfort erhöht auch den Leistungsverlust:

// bad
ctx.drawImage(
  img,
  x, y
);

// good
ctx.drawImage(
  img,
  // clipping
  sx, sy,
  sw, sh,
  // actual stuff
  x, y,
  w, h
);

// much hax
// no subpixel rendering by passing integers
ctx.drawImage(
  img,
  sx|0, sy|0,
  sw|0, sh|0,
  x|0, y|0,
  w|0, h|0
);

Das Obige ist der Inhalt des Schreibens von Hochleistungs-JavaScript. Für weitere verwandte Inhalte achten Sie bitte auf PHP-Chinesisch Website (www.php.cn) !