編寫高性能的JavaScript

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

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;

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

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
}

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

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

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

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