Write high-performance JavaScript

The original intention of this article is to introduce how to use some simple coding tips to improve the JavaScript compiler The optimization process improves code running efficiency. Especially in games where the speed of garbage collection is high, users will see a white screen if the performance is slightly poor.

Monomorphism: Monomorphism

JavaScript allows dynamic parameters to be passed in when a function is called, but taking a simple 2-parameter function as an example, when your parameter type, number of parameters and return type It can only be determined when calling dynamically, and the compiler needs more time to parse. Compilers naturally want to be able to handle monomorphically predictable data structures, parameter statistics, etc.

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

Constants: Constants

Using constants allows the compiler to complete variable value replacement during compilation:

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: inline

JIT The compiler can find the parts of your code that are executed most often. Splitting your code into small code blocks can help the compiler convert these code blocks into inline format at compile time and increase execution speed. .

Data Types: Data Types

Use Numbers and Booleans types as much as possible because they perform better than other primitive types such as strings. Using string types may incur additional garbage collection costs.

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) {
  
}

Strict & Abstract Operators

Use the === strict comparison operator instead of the == operator whenever possible. Using strict comparison operators can avoid the compiler from performing type deduction and conversion, thus improving certain performance.

Strict Conditions

The if statement in JavaScript is also very flexible. You can directly pass any similar a value into the if(a) then bla type of conditional selection statement. However, in this case, just like the strict comparison operators and loose comparison operators mentioned above, the compiler needs to convert them into multiple data types for comparison, and the results cannot be obtained immediately. Of course, this is not a blind objection to the use of abbreviations, but in scenarios that place great emphasis on performance, it is recommended to optimize every detail:

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
}

Arguments

Avoid using arguments as much as possible [index] method to obtain parameters, and try to avoid modifying the incoming parameter variables:

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'
};

Toxicity: These keywords are poisonous

Toxicity

Several syntaxes listed below Features that affect the optimization process:

• eval

• with

• try/catch

At the same time, try to avoid declaring functions or closures within functions, which may cause too many garbage collection operations in a large number of operations.

Objecs

Object instances usually share implicit classes, so when we access or set the value of an undefined variable of an instance, an implicit class is created.

// 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;

Loops

Cache the calculated value of the array length as much as possible, and store a single type in the same array as much as possible. Avoid using the for-in syntax to iterate over an array because it's really slow. In addition, the performance of continue and break statements in loops is also good, so you don’t have to worry about this when using them. In addition, split short logical parts into independent functions as much as possible, which is more conducive to compiler optimization. In addition, using prefix auto-increment expressions can also bring about a small performance improvement. (++i instead of 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 function is one of the fastest 2D Canvas APIs, but we need to pay attention to if all parameters are omitted for the sake of convenience. , will also increase performance loss:

// 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
);

The above is the content of writing high-performance JavaScript. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!