原则

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

 

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

  • 我还能做哪些工作从而让代码变得更有效率?

  • 流行的JavaScript引擎通常会做哪些优化工作?

  • 哪些优化是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指向的对象会在方法执行完毕后处于可回收状态;在第二个列子中,由于在局部变量外维护了一个全局变量b,bar指向的对象无法被回收。

闭包 (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)中,第一段更快。

诸葛实力提醒:千万别觉得几十K的东西是小的。

分享几个高效编写JS 的心得的更多相关文章

  1. SlimerJS – Web开发人员可编写 JS 控制的浏览器

    SlimerJS 是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器.它可以让你使用 Javascript 脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机 ...

  2. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  3. Facebook内部分享:25个高效工作的小技巧

    Facebook内部分享:25个高效工作的小技巧 Facebook 内部分享:不论你如何富有,你都赚不到更多的时间,你也回不到过去.没有那么多的假如,只有指针滴答的时光飞逝和你应该好好把握的现在,以下 ...

  4. MyEclipse2015 编写js报 'Calculating completion proposals..' has encountered a problem.

    前言:编写js(按点后)弹出这个鬼东西,百度不到..估计是破解有问题.只有换版本了. 版本:MyEclipse 2015 stable 1.0 详细错误信息 解决:换成2.0版本

  5. html中编写js的方式

    第一种:引用外部的js文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...

  6. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  7. echarts.js使用心得--demo

    首先要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术. 废话不多时 , 直接开始. 第一步: 导入echarts.js文件 下载地址:http://e ...

  8. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  9. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

随机推荐

  1. MySQL的max()函数使用时遇到的小问题

    通常我们获取某个表的某个字段最大值时可以使用max()函数. 使用场景举例: 获取某个表id的最大值:SQL: SELECT max(id) FROM table_name; SELECT max(` ...

  2. task15-18

    [说明]貌似maven在真实的项目实战中挺重要的,可以省去大量的工作,有必要单独学习一下 15.创建一个新的maven项目 16.在src/main/java下随便创建一个java文件,clean,i ...

  3. ArcGIS API for js Legend(图例)

    1.说明 有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...

  4. Bootstrap学习-网格系统

    1.实现原理 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Boot ...

  5. 2017-2018-1 20179209《Linux内核原理与分析》第九周作业

    理解进程调度时机 进程调度时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用schedule(): 内 ...

  6. Webpack探索【3】--- loader详解

    本文主要说明Webpack的loader相关内容.

  7. 页游手游服务器(五)sql缓存层

    sql的通用缓存,是实现最麻烦的一部分,对于查询结果的缓存,主要有如下的结构来缓存: cache tablename--player statement--select * from player w ...

  8. 我的Android进阶之旅------>Android关于Log的一个简单封装

    android.util.Log类,可以方便地用于在编码调试过程中打印日志.但是在发布后的产品中,如果有太多的日志打印,则会严重地影响性能.对android.util.Log类做一个简单的封装,当产品 ...

  9. test_bdc

    [转]REPORT zbdc_test_by_shir. * 定义个BDC格式的内表**************************************************DATA : B ...

  10. iOS category 类别 和 extension 扩展

    category  类别 又称为 分类 在ios项目开发中允许使用类别为现有的类添加新的方法,并不需要创建子类.通过类别我们可以动态地为现有的类添加新的方法,可以将类的定义模块化地布局到多个相关文件中 ...