编写高效JavaScript代码

本文是阅读Writing Fast, Memory-Efficient JavaScript后的总结和笔记,不是严格意义上的翻译,如果有时间,推荐阅读原文。

原则

不要做任何优化除非的确需要优化

任何的性能优化都必须以测量数据为基础,如果你怀疑代码存在性能问题,首先通过测试来验证你的想法。

性能优化三问

  1. 我还能做哪些工作从而让代码变得更有效率?
  2. 流行的JavaScript引擎通常会做哪些优化工作?
  3. 哪些优化是JavaScript引擎不能做的,垃圾回收器是否能清理我们期望清理的?

对JavaScript引擎的深入了解有助于我们编写高效的JavaScript代码,但不要只针对某一特定引擎做性能优化。

V8的几个关键概念

  • 基础编译器,解析你的JavaScript代码并生成Native Machine Code执行,而不是执行字节码或是直接对JavaScript解释执行。
  • 在V8中,对象以object model的形式存在。对象在JavaScript中是以关联数组的形式存在,但V8采用的是Hidden Classes——一种对查找操作进行了优化的内部类型系统。
  • 运行时探查器监视运行中的系统,并识别出Hot functions,即是耗用了较长时间的代码
  • 优化编译器重新编译并优化由运行时探查器识别出来的Hot代码
  • V8支持反优化,优化编译器能够发现过度优化的代码并对其进行处理
  • V8有自己的垃圾回收器

垃圾回收

垃圾回收是一种内存管理机制,垃圾回收器会尝试清理掉不再被使用的对象,并回收内存。

  • 在绝大多数情况下都不需要手动解除引用
  • 你不可能强制垃圾回收器工作

删除引用的误区

尽可能不要使用delete,在下面的列子中,delete 带来的弊远远大于利

var o = { x: 1};
delete o.x;

主要的原因是为了避免在运行时修改Hot对象的结构,因为固定的对象结构有助于JavaScript引擎对其进行优化,而delete会导致对象结构改变

另外一个误区是将对象设置为null,将对象设置为null不会删除对象,只是将对象指向null,这要好过采用delete,但通常也是不必要的。

全局变量在整个页面生命周期中都是不会被清理的,无论页面打开多长时间,除非是刷新页面或者转到其他页面。局部变量(Function-scoped)在方法执行完后,且没有被引用的情况下将会被回收。

所以,请尽量避免使用全局变量

经验法则

为了使垃圾回收器尽早回收对象,不要保持不必要的对象引用

  • 比手动解除引用更好的方法是将对象放在合适的变量域中,能用局部变量就不要采用全局变量
  • 当事件监听不再需要时,请解除事件绑定,尤其是当事件绑定的DOM对象被删除时
  • 如果有使用本地缓存,请确保有合适的清理机制(比如时效机制),从而避免大量无用的数据存储。

方法 (Function)

如前面所说,垃圾回收器只有在对象不可触及的时候才会对其做回收处理。考虑如下两个列子

function foo(){
  var bar = new LargeObject()
  bar.someCall();
}
function foo(){
  var bar = new LargeObject()
  bar.someCall();
  return bar;
}
var b = foo();

在第一个例子中,bar指向的对象会在方法执行完毕后处于可回收状态;在第二个列子中,由于在局部变量外维护了一个全局变量bbar指向的对象无法被回收。

闭包 (Closures)

当一个方法返回一个内部方法时,被返回的内部方法能访问外部方法的局部变量域即使外部方法已经执行完毕。

function sum(x){
  function sumIt(y){
    return x + y;
  }
}
var sumA = sum(4);
var sumB = sumA(3);

在上面的例子中,sumIt方法即使处于sum的局部变量域中,但由于存在一个sumA全局变量,在sum执行完毕后也无法被回收。

再看两个例子

var a = function(){
  var largeObj = new LargeObject();
  return function(){
    return largeObj;
  }
}();
var a = function(){
  var smallObj = new SmallObj();
  var largeObj = new LargeObj();
  return function(n){
    return smallObj;
  }
}();

第一个例子中,largeObj可以通过变量a访问,因此不可被回收;在第二个例子中,方法一旦执行完毕,largeObj就无法被访问了,因此处于可回收状态。

定时器 (Timer)

setTimeout / setInterval 方法中的引用,只有当定时器执行完成后才能被回收

V8优化小贴士

  • 某些行为会导致V8停止优化工作,比如try-catch, 为了能弄清哪些代码可以被优化,哪些不能,你可以在V8命令行工具中使用—trace-opt file.js获得有用的信息。

  • 如果你在意速度,那就尽可能保证你的方法是”单形的(monomophic)"

    不要做类似如下的尝试

    function add(x, y){
      return x+y;
    }
    add(1,2);
    add('a','b');
    add(my_custom_object, undefined);
    
  • 不要加载没有被初始化或者已被删除的元素,尽管在输出上没有不同,但却会让代码变得更慢

  • 不要写大方法,因为他们很难被优化。

对象还是数组, 如何选择?

  • 如果存储的是大量数字,或者是相同类型的对象列表,采用数组;

  • 如果根据语义你需要一个有很多属性的对象,那就采用对象,在内存利用方面这会很高效,同时也很快;

  • 无论是数组还是对象,采用整数索引都最快的。

    var sum = 0;
    for (var x=0; x<arr.length; ++x){
      sum + = arr[x].payload;
    }
    
    var sum = 0;
    for(var x in obj){
      sum += obj[x].payload;
    }
    
    var sum = 0;
    for(var x=0; x<1000,++x){
      sum += obj[x].payload;
    }
    
    var sum = 0;
    var keys = Objects.keys(obj);
    for(var x=0; x<keys.length;++x){
      sum += obj[keys[x]].payload;
    }
    

    在上面的四段代码中,第一段和第三段速度比第二段和第四段要快很多。其中,第一段代码执行最快,最后一段代码执行最慢。

  • 相比数组中的元素,对象的属性在结构上相对复杂。在引擎层面,内存中越是简单的结构越容易被优化,尤其是包含数字的数组。因此,如果你需要向量,采用数组而不是一个包含x, y, z属性的对象会有更优的性能表现。

在JavaScript中,数组和对象最重要的不同是数组的length属性,如果你能自己维护这个值,对象在V8中也能跑出数组的速度。

使用对象的性能小贴士

  • 使用构造函数创建对象,因为所有采用同一构造函数创建的对象都具有相同的hidden class,另外,采用构造函数创建对象也比Object.create()这种方法略块。
  • 尽管JavaScript没有限制类型数量和对象的复杂度,但长原型链和大量的对象属性会对性能造成损害。因此尽可能保持较短的原型链和较少的对象属性。

对象的拷贝

for..in循环是性能杀手,通过该方法遍历对象属性进行拷贝非常低效。拷贝大对象始终会降低性能,尽可能不要干这样的事情,当然大对象的存在本身就是一个错误。如果你确实需要在性能攸关的代码中拷贝对象,可以采用如下的方式。

function clone(original){
  this.foo = original.foo;
  this.bar = original.bar;
}
var copy = new clone(original);

缓存采用模块化编程(Module Pattern)的方法

// prototypal

Klass1 = function(){}
Klass1.prototype.foo = function(){
  log('foo');
}
Klass1.prototype.bar = function(){
  log('bar');
}
// Module pattern
Klass2 = function(){
  var foo = function(){
    log('foo');
  }
  var bar = function(){
    log('bar');
  }
  return {foo:foo,bar:bar}
}
// Module pattern with cached functions
var fooFn = function(){
  log('foo');
}
var barFn = function(){
  log('bar')
}
Klass3 = function(){
  return{
    foo: fooFn,
    bar: barFn
  }
}

执行速度从快到慢依次是

Module Pattern with Cached functions → prototypal → Module pattern

使用数组的性能小贴士

  • 不要删除数组元素,当数组的Key set分布分散后,V8会将存储方式转为字典,导致速度变慢。
  • 数组常量更高效,尤其是小数组和中等大小的数组。
var a = [1, 2, 3, 4]
var a = [];
for(var i=1, i<=4; i++){
  a.push(i);
}

不要采用第二段代码中的方法初始化数组。

  • 不要在数组中存储不同类型的元素
  • V8中,稀疏数组( Sparse Arrays)是被当成字典对待的,因此相比密集数组(Full Arrays),执行速度更慢
  • 与紧凑的数组相比,满身是洞的数组执行更慢,即使是从密集数组中删除一个元素,也会带来性能上的损失。
  • 不要预先给大数组(大于64k)分配一个最大值
var arr = [];
for(var i = 0; i< 1000000; i++){
  arr[i] = 1;
}
var arr = new Array(1000000);
for(var i=0; i<1000000; i++){
  arr[i]=i;
}

需要注意的是,不同引擎在这一点上有不同,在Nitro(Safari)中,第二段代码跑得更快,但在V8(Chrome), SpiderMonkey(Firefox)中,第一段更快。

公众号搜索:front_end_talk
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容

  • JavaScript绝对是最火的编程语言之一,一直具有很大的用户群,随着在服务端的使用(NodeJs),更是爆发了...
    不去解释阅读 2,347评论 1 16
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,343评论 2 36
  • 今天是2017.8.27r。 早上收到预警sz今天又有台风,打开手机看了倒计时,只剩下97天了,可怕。自己还没怎么...
    是蓝先生阅读 496评论 0 0
  • 辞职探亲,数日仍没有见到父亲。 在豫西的小县城,只有连绵的丘陵,山在豫西的西方,偶尔可以遥望,朦胧的轮廓。父亲...
    野西米阅读 401评论 0 0
  • (还乡团归来.宴筹)明月几时照东方,万里赤子要归来。它方有情这里暖,那边同学还乡团。心有缘由自开放,身在异国思故乡...
    甘朝武阅读 456评论 0 0