JavaScript中匿名、命名函数的性能测试

我们经常通过匿名函数（Anonymous function）来写回调。

简单来讲匿名即没有名字的函数，一般都立即执行。但是它与命名函数（有名字的函数）的性能如何呢？

我们可以比较一下，我们随便找一台可以执行Shell命令的计算机来使用大量函数调用看一看二者执行消耗时间：

anonymous.js


代码如下:

var count = 100000000
  , sum   = 0
while (count--) (function() { sum++ })()

执行一下

代码如下:

$ time node anonymous.js
real    0m1.456s
user    0m0.015s
sys     0m0.031s

再来看看命名函数

named.js


代码如下:

var count = 100000000
  , sum   = 0

var cb = function() {
  sum++
}

while (count--) cb()

执行一下

代码如下:

$ time node named.js
real    0m0.575s
user    0m0.000s
sys     0m0.046s

命名函数会快很多，为什么会这样呢？其实不难解释，匿名函数每次都需要重新解释回调，但是命名函数只需要解释一次，因此性能会有提升，但是测试发现这种提升是非常非常微小的，完全不必将非常顺手的一个回调单独写成另外一个变量。

另外命名函数还有两种写法：

函数表达式


代码如下:

var func = function() {
  console.log('a')
}

函数声明


代码如下:

function func() {
  console.log('b')
}

其实这两个一起用的话可能会有问题，如

代码如下:

var func = function() {
  console.log('a')
}
function func() {
  console.log('b')
}
//输出为： a

因此目前多使用函数表达式的形式，但函数声明的性能如何呢？

named2.js


代码如下:

var count = 100000000
  , sum   = 0

function cb() {
  sum++
}

while (count--) cb()

执行一下，并比较二者


代码如下:

$ time node named.js
real    0m0.553s
user    0m0.000s
sys     0m0.015s

$ time node named2.js
real    0m0.529s
user    0m0.000s
sys     0m0.047s

似乎函数声明会稍微快一点点，不过快得也非常非常不明显，个人还是建议函数声明式写法。

PS： 此数据均在Windows7下使用git-base测试。

赞 (0)

相关推荐

  • JavaScript中的document.referrer在各种浏览器测试结果

    前段时间需要通过 JavaScript 获取页面的来源,这个操作很简单,使用 document.referrer 就可以获取到了.不过,实际应用中还是有很多意外情况,这儿简单整理一下. 首先遇到的问题,是从 HTTPS 页面转到 HTTP 页面后,document.referrer 的值为空.出于安全性考虑,很多网站的一些重要页面(比如淘宝的登录页面)都会使用 HTTPS 协议.如果某个未登录用户在页面 A(HTTP 页面)点击了页面 B(HTTP 页面)的链接,但页面 B 需要用户登录,于是先

  • angularjs中的e2e测试实例

    angularjs中的e2e测试实例

    在上一篇文章里有讲到ng的单元测试,今天来说说e2e(端对端)测试. 当我们测试某个模块的单个功能点时,单元测试最适合,不过当面临用户进行多个页面交互的时候产生bug了,单元测试就不行了,这时候就得用e2e来模拟用户操作还原问题现场.当然利用e2e测试也能够测试程序的健壮性,很多单元测试办不到的事情,e2e测试都能够办到. 之前,ng是利用Angular Scenario Runner来运行e2e测试,现在已经换成Protractor来跑e2e了. Protractor Protractor是A

  • js简单网速测试方法完整实例

    js简单网速测试方法完整实例

    本文实例讲述了js简单网速测试方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <m

  • 原生javascript兼容性测试实例

    1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle; 实例:封装函数 复制代码 代码如下: function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } 调用:ge

  • javascript页面渲染速度测试脚本分享

    复制代码 代码如下: /* 获取渲染开始的时间戳, 保存在数组PAGE_SPEED_TIME中 */<html><script type="text/javascript">/*tag*/PAGE_SPEED_TIME = [new Date().getTime()];</script><head>......</head> 复制代码 代码如下: ....../* 页面最末端,计算页面加载耗用的时间 */</body&g

  • 纯js实现div内图片自适应大小(已测试，兼容火狐)

    这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

  • 访问百度和谷歌网速测试的javascript代码

    以下是访问百度和谷歌网速测试,请问怎么把得到的二个值保存到save变量里,并用document.write(save); 输出出来,谢谢! "); for(var i=1;i"); } document.write(""); } butt(); function auto(url,b){ document.forms[0]["txt"+b].value="响应时间:"+tim/100+"秒" } funct

  • JavaScript中匿名函数用法实例

    本文实例讲述了JavaScript中匿名函数用法.分享给大家供大家参考.具体分析如下: JS中可以不用给函数名称,而是在使用时直接通过function把函数体赋值给相关的事件或者变量. 下面的JS代码给按钮设定了一个onclick事件,使用了匿名函数 <form action="#"> <input type="button" value="Click Me" id="anonbutton" /> &l

  • Javascript中匿名函数的调用与写法实例详解(多种)

    Javascript中定义函数的方式有多种,函数直接量就是其中一种.如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数.好,看看匿名函数的如何被调用. 方式1,调用函数,得到返回值.强制运算符使函数调用执行 (function(x,y){ alert(x+y); return x+y; }(3,4)); 方式2,调用函数,得到返回值.强制函数直接量执行再返回一个引用,引用再去调用执行 (function(x,y){ alert(x+y);

  • JavaScript中匿名函数的用法及优缺点详解

    匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function(

  • 理解与使用JavaScript中的回调函数

    概述 在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在JavaScript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在JavaScript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段JavaScript或者jQuery代码,但是对于许多开发者来说它任然是一

  • 详解JavaScript中的箭头函数的使用

    详解JavaScript中的箭头函数的使用

    目录 前言 箭头函数语法 无圆括号语法 隐式返回 注意隐式返回错误 无法命名箭头函数 如何处理this关键字 匿名箭头函数 不正常工作的情况 箭头函数作为对象方法 箭头函数与第三方库 箭头函数没有arguments对象 总结 前言 本文可以让你了解所有有关JavaScript箭头函数的信息.我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误.你会看到很多例子来说明它们是如何工作的. JavaScript的箭头函数随着ECMAScript 2015的发布而到来,

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 详解JavaScript中常用的函数类型

    网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型. 1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </s

  • JavaScript中的Function函数

    首先给大家介绍JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. 复制代码 代码如下: function func(){} 或 复制代码 代码如下: var func=function(){}; 2.作为一个类构造器使用: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: (function(){ //独立作用域 })(); 4.可以作为选择器使用:

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • JavaScript中的工厂函数(推荐)

    JavaScript中的工厂函数(推荐)

    在学习jQuery的时候,我们经常会看到"工厂函数"这个概念,那么究竟什么是"工厂函数"呢?我们来看看概念,"所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于Javascript本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript并没有严格的"工厂函数",但是在Javascript中,我

随机推荐