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.
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
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;
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.
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) { }
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.
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 }
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' };
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.
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;
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]; };
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 (m.sbmmt.com) !