编写高性能的JavaScript

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了编写高性能的JavaScript，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4677字，纯文字阅读大概需要7分钟。

内容图文

本文的初衷是想介绍如何利用些简单的代码小技巧就能促进JavaScript编译器的优化进程从而提升代码运行效率。特别是在游戏这种对于垃圾回收速度要求较高，你性能稍微差点用户就能见到白屏的地方。

Monomorphism:单态性

JavaScript中允许函数调用时候传入动态参数，不过就以简单的2参数函数为例，当你的参数类型、参数数目与返回类型动态调用时才能决定，编译器需要更多的时间来解析。编译器自然地希望能够处理那些单态可预测的数据结构、参数统计等。

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:常量

使用常量能够让编译器在编译时即完成变量的值替换:

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:内联

JIT编译器能够找出你的代码中被执行次数最多的部分，将你的代码分割成多个小的代码块能够有助于编译器在编译时将这些代码块转化为内联格式然后增加执行速度。

Data Types:数据类型

尽可能地多用Numbers与Booleans类型，因为他们与其他类似于字符串等原始类型相比性能表现更好。使用字符串类型可能会带来额外的垃圾回收消耗。

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

尽可能使用 === 这个严格比较操作符而不是 == 操作符。使用严格比较操作符能够避免编译器进行类型推导与转换，从而提高一定的性能。

Strict Conditions

JavaScript中的if语句也非常灵活，你可以直接在 if(a) then bla 这个类型的条件选择语句中传入随意类似的a值。不过这种情况下，就像上文提及的严格比较操作符与宽松比较操作符一样，编译器需要将其转化为多个数据类型进行比较，而不能立刻得出结果。当然，这并不是一味的反对使用简写方式，而是在非常强调性能的场景，还是建议做好每一个细节的优化:

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

尽可能避免使用arguments[index]方式进行参数获取，并且尽量避免修改传入的参数变量:

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:这些关键字有毒

Toxicity

如下列举的几个语法特性会影响优化进程:

• eval

• with

• try/catch

同时尽量避免在函数内声明函数或者闭包，可能在大量的运算中导致过多的垃圾回收操作。

Objecs

Object实例通常会共享隐类，因此当我们访问或者设置某个实例的未预定义变量值的时候会创建一个隐类。

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

尽可能的缓存数组长度的计算值，并且尽可能在同一个数组中存放单个类型。避免使用 for-in 语法来遍历某个数组，因为它真的很慢。另外，continue与break语句在循环中的性能也是不错的，这一点使用的时候不用担心。另外，尽可能将短小的逻辑部分拆分到独立的函数中，这样更有利于编译器进行优化。另外，使用前缀自增表达式，也能带来小小的性能提升。（++i代替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函数算是最快的2D Canvas API之一了，不过我们需要注意的是如果为了图方便省略了全参数传入，也会增加性能损耗：

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

以上就是编写高性能的 JavaScript的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的编写高性能的JavaScript全部内容，希望文章能够帮你解决编写高性能的JavaScript所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端