2016:编写高性能的JavaScript

plus2047 发布于2019-08-20 12:32 / 1455人阅读

摘要：编写高性能的翻译自的文章。编译器自然地希望能够处理那些单态可预测的数据结构参数统计等。使用严格比较操作符能够避免编译器进行类型推导与转换，从而提高一定的性能。另外，与语句在循环中的性能也是不错的，这一点使用的时候不用担心。

2016:编写高性能的JavaScript翻译自Felix Maier的文章Writing-Efficient-JavaScript。本文从属于笔者的Web 前端入门与最佳实践中JavaScript 入门与最佳实践系列文章。

本文的初衷是想介绍如何利用些简单的代码小技巧就能促进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
);

云服务器 GPU云服务器如何编写高性能的javascript 编写可维护的javascript javascript2016 高性能的javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81042.html

2016年度 JavaScript 展望（下）

摘要：与是年最早公开发布的两个框架，后来者还包括与。此外，另一重心是与团队的合作，预计将贯穿年。年展望对平台而言，年的重点是提升稳定性与采纳率。最早由开发，于年公开发布。时间会告诉我们，的极速增长能否在年持续下去。【编者按】本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能，是《jQuery UI 实践》一书的作者。本文系 OneAPM 工...

XGBCCC 2019-08-19 18:08 评论0 收藏0
JavaScript 开发者所需要知道的 V8（一）：V8 In NodeJS

摘要：欢迎来我的博客阅读开发者所需要知道的一是一款拥有自动垃圾回收功能的编程语言。它随着的第一版发布而发布以及开源。年月，基金宣布和合并，合并版本在未来发布。年月日，官方公布又一个新的名为的优化编译器，主要提供的新语法，以及提高性能。欢迎来我的博客阅读：「JavaScript 开发者所需要知道的 V8（一）：V8 In NodeJS」 Motivation JavaScript 是一款拥有...

Lemon_95 2019-08-20 12:18 评论0 收藏0
(译 & 转载) 2016 JavaScript 后起之秀

摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 评论0 收藏0
2016年前端开发学习计划

摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...

asoren 2019-08-19 18:37 评论0 收藏0
2016年前端开发学习计划

摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...

Null 2019-06-26 17:04 评论0 收藏0