马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > js教程 > 推荐一种测试JavaScript执行性能和性能比较的方法

推荐一种测试JavaScript执行性能和性能比较的方法

时间:2013-05-12   文章来源:www.mahaixiang.cn   访问次数:

随着越来越多的站长对网站形象方面的关注,js文件也使用的越来越多了,于是乎一些细心的seo优化人员也开始重视JavaScript 的性能问题了,同时也导致了越来越多的 JS 性能测试框架和一些工具诞生,比如说 JSLitmus、jsperf 等等,由于本人对JavaScript方面的知识掌握的也不是太深,所以今天我们在马海祥博客上要探讨分享的是一种比较简单、实用、容易上手的 JS 性能测试的方法。

推荐一种测试JavaScript执行性能和性能比较的方法-马海祥博客

举例来说,现在有一个只包含数字类型的数组,然后我会用两种方法对数组元素求和,比较两个方法的性能。

首先生成这么一个长度是 10000 的 [0, 1, 2, 3, .... 9999] 数组,长度不能太短,否则比较差值不大,效果不是很明显。

var arr = [],     // 声明一个空数组
  sum = 0;      // 总和初始值
  // 生成一个长度是 10000 的数组
  for (var index = 0, len = 10000; index<len; index++) {
     arr.push(index);
  }

第一种方法是用for循环去累加sum变量,得到最终结果。

// for 循环
  function forLoop(arr) {
     var i = 0,
        l = arr.length;
     for (; i<l; i++) {
        sum += arr[i];
     }
  }

第二种方法是用递归,用数组的 shift() 方法每次删除数组的第一个元素,并将其累加,递归执行。

// shift 递归
  function shiftLoop(arr) {
     if (!!arr.length) {
        sum += arr.shift();
        arguments.callee(arr);
     }
  }

分别执行以上这两个方法,其实功能都是一样一样的,而我们肉眼几乎无法分辨这两者到底谁执行的更快,这时候我们就要用事实说话,让数据说话,编写以下简单的性能测试函数,就能知道答案了。

// 最简单的性能测试函数
  function test(fn, param) {
     var s, d;
     // 记录执行的起始时间
     s = new Date().getTime();
     // 执行待测试的方法
     fn(param);
     // 记录执行的结束时间
     d = new Date().getTime();
     // 输出待测试方法所运行的结果和耗时
     alert( ‘计算结果:’ + sum + ‘,耗时:’ + (d-s) + ‘毫秒’ );
  }

最后,再分别执行刚才编写的 test() 方法,其参数就是需要测试的方法名和该方法所用到的参数:

// 分别执行看结果
  // test(forLoop, arr);
  test(shiftLoop, arr);

在我的电脑上测试发现,用for循环仅需 0~1 毫秒,而用shift递归则需要 75 毫秒左右,可见经过比较得知,for循环比 shift 递归执行速度更快,性能更佳!

这个方法测试只是要你了解其中原理,以便在平时写JS 的过程中对性能有犹豫的时候,你也可以编写这么一个简单的方法来帮助你择优录取!希望对你能有所帮助。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/js/210.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: JavaScript   js文件   JS性能比较  

上一篇:常见JS挂马方法及如何防止网站被黑客挂马?
下一篇:JavaScript是什么?JavaScript功能有哪些?

您可能还会对以下这些文章感兴趣!

  • 推荐一种测试JavaScript执行性能和性能比较的方法

    随着越来越多的站长对网站形象方面的关注,js文件也使用的越来越多了,于是乎一些细心的seo优化人员也开始重视JavaScript 的性能问题了,同时也导致了越来越多的 JS 性能测试框架和一些工具诞生,比如说 JSLitmus、jsperf 等等,由于本人对JavaScript方面的知识掌握的也……【查看全文

    阅读:7003关键词: JavaScript   js文件   JS性能比较   日期:2013-05-12
  • 最新挂木马的10大操作方法

    最近看了很多博友反馈的问题,发现最近一周谈论最多的问题就是js挂马的问题。问题也大多集中在如何挂马、挂马的方法有哪些?挂马的效果和如何防止自己网站被挂木马。并根据自己多年做网站的经验汇总了10条网站挂木马的常用的一些代码写法。在此给大家介绍一下具体代码……【查看全文

    阅读:1218关键词: 挂马   最新挂木马方   挂马操作方法   最新挂马方法   日期:2013-05-20
  • 常用的JS页面跳转代码调用大全

    所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面。目前很多垃圾站经常用js跳转将正常页面跳转到广告页面,当然也有一些网站为了追求吸引人的视觉效果,把一些栏目链接做成js链接,但这是一个比较严……【查看全文

    阅读:24316关键词: js页面   js跳转   js代码   js调用   日期:2014-09-17
  • JavaScript对象属性的基础教程指南

    JavaScript是使用对象化编程的,或者叫面向对象编程的。所谓对象化编程,意思是把JavaScript能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象,小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。……【查看全文

    阅读:1315关键词: js教程   JavaScript   js对象   js属性   js指南   日期:2014-03-13
  • 常见JS挂马方法及如何防止网站被黑客挂马?

    最近有朋友说自己的网站平时并未作弊,文章也都是原创的,更新很稳定。可不知道为什么网站突然就被各大搜索引擎降权了,一直找不到原因。最后发现是网站被挂马了,导致网站被连累了。在此,借助马海祥博客的平台,给大家简单的介绍下js挂马的方法及如何防止网站被挂马……【查看全文

    阅读:1985关键词: JS挂马   防止网站挂马   常见挂马方法   日期:2012-10-26
  • Javascript教程:js异步模式编程的4种解决方法

    随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javascript语言的执行环境是单线程(single thread)。 所谓单线程,就……【查看全文

    阅读:5145关键词: Javascript   js教程   异步模式   js编程   日期:2013-09-03
  • JS基础知识:Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言。JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为,Javascript事件像HTML标签的属性一样使……【查看全文

    阅读:2112关键词: js知识   javascript   js事件列表   js事件   日期:2014-06-26
  • 常用的JavaScript字符串处理函数及用法

    最近参加了几次前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题、淘宝的笔试题等,如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一,这些题有一个特点,站在考官的角度去……【查看全文

    阅读:1639关键词: javascript   字符串   日期:2015-05-03
  • JavaScript开发者新手经常忽略或误用的基础知识点

    JavaScript本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它,昨天我们将这些模式应用到了JavaScript框架中,今天这些框架又驱动了我们的Web应用程序。很多新手开发者被各种强大的JavaScript框架吸引进来,但却忽略了框架身后浩如星海的JavaScript……【查看全文

    阅读:637关键词: javascript   开发者   日期:2016-07-03
  • JavaScript事件处理程序的3种方式

    事件对象是用来记录一些事件发生时相关信息的对象,但事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!事件流就是描述了页面中接受事件的顺序,在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐……【查看全文

    阅读:8333关键词: javascript   js事件   日期:2014-07-19
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告