楼主: gfrgghk
785 0

[休闲其它] 从找索引浅谈性能优化 [推广有奖]

  • 0关注
  • 0粉丝

大专生

21%

还不是VIP/贵宾

-

威望
0
论坛币
0 个
通用积分
0
学术水平
3 点
热心指数
0 点
信用等级
0 点
经验
360 点
帖子
24
精华
0
在线时间
2 小时
注册时间
2014-12-3
最后登录
2014-12-4

楼主
gfrgghk 发表于 2014-12-3 10:24:16 |AI写论文

+2 论坛币
k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群
赵安豆老师微信:zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

感谢您参与论坛问题回答

经管之家送您两个论坛币!

+2 论坛币
有这么一个题目:找出由数字组成的数组中最大值的索引。 (PS:不用考虑兼容性)

网站性能优化 Javascript 代码优化 网站优化

三个方案中,方案一最传统最直接明了,相信也是大部分人脑海里最早浮现出来的方案;方案二比方案一更简洁,使用reduce方法替换了for循环;方案三最简洁,没有循环,没有条件判断,一行代码解决问题。大部分人都喜欢追求代码简洁优雅,要是可选的话,相信很多人都会选择方案三。

但问题来了,这三个方案中哪一个性能最好呢?

方案一:性能最差,因为它需要手动去遍历数组,并且每个遍历都需要进行条件判断,所以这里的性能损耗最大;
方案二:性能较好,因为它使用了JavaScript内置的reduce函数帮我们完成了方案一中手动完成的数组遍历工作;JavaScript内置的方法肯定是比我们自己实现的要快,因此在同样需要条件判断的情况下,方案二肯定是由于方案一;
方案三:性能最好,因为相对方案二,它连条件判断都省了,使用了Math.max替代。
但实际情况真的如上面所猜测的吗?下面我们来做个测试:

测试地址:

indexOfMax-100,000   http://jsperf.com/indexofmax
indexOfMax-120,000   http://jsperf.com/indexofmax-120000
indexOfMax-130,000   http://jsperf.com/indexofmax-130000
测试结果如下:

网站性能优化 Javascript 代码优化 网站优化

从结果中可以看得出来,性能上:方案一最好,方案三次之,方案二最差;与上面猜测的结果完全相反。方案一最好猜测应该是浏览器JavaScript解释引擎对代码进行了优化后执行的结果,优化后的代码从底层实现上来看应该是比reduce、indexOf、Math.max等底层接口的性能更好,因此效率更高。

同时注意到,在Chrome下,当数组长度达到130,000时浏览器抛出了最大调用堆栈的异常,我此前说过,浏览器对调用堆栈的大小是有限制的。不同浏览器对函数最大参数长度的限制是不一样的,所以这里需要注意下。由:武汉网站建设 www.bayinmao.com 收集整理jnwm发布

二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

关键词:Javascript script reduce Chrome Index 网站优化 reduce 兼容性 最大值 优雅

您需要登录后才可以回帖 登录 | 我要注册

本版微信群
jg-xs1
拉您进交流群
GMT+8, 2025-12-30 00:36