JavaScript函数的性能各种方式对比 - 行业资讯 - 肥雀云

这篇文章主要介绍了JavaScript函数的性能各种方式对比,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

概述

测量执行一个函数所需的时间总是一个很好的办法,证明某些实现比另一个实现的性能更好。这也是一个很好的方法,可以确保性能没有在某些改变后受到影响,也可以追踪瓶颈。

良好的性能有助于获得良好的用户体验,良好的用户体验会让用户回头客。一项研究显示,88%的在线消费者因为性能问题,在用户体验不佳后用户回来的可能性较小。

这就是为什么能够识别代码中的瓶颈并测量改进的原因,尤其是在为浏览器开发JavaScript时,要注意到你写的每一行JavaScript都有可能阻塞DOM,因为它是一种单线程语言。

在这篇文章中,我将解释你如何测量你的功能的性能,以及如何处理你从它们中得到的结果。

绩效。现在

性能API通过其功能performance.now()提供对DOMHighResTimeStamp的访问,该函数返回自页面加载以来经过的时间(以毫秒为单位),精度最高为5μs(以分数为单位)。

所以在实践中,你需要取两个时间戳,保存在一个变量中,然后让第二个时间戳减去第一个时间戳。

const t0 =, performance.now (); 　　for (let 小姐:=,0;,小姐:& lt;, array.length;,我+ +),{//才能,some 代码　　} 　　const t1 =, performance.now (); 　　console.log (t1 安康;t0, & # 39;毫秒# 39;);

铬输出

0.6350000001020817“milliseconds"

Firefox输出

1毫秒
在这里,我们可以看到Firefox中的结果与Chrome完全不同,这是因为Firefox版本从60开始将性能API的精度降低到2 ms。

性能API提供的功能远比只返回时间戳要多得多,它能够测量导航计时,用户计时或资源计时。请看这篇文章,里面有更详细的解释。

但是,对于我们的用例,我们只想测量单个函数的性能,因此时间戳就足够了。

那不是和Date.now一样吗?

现在你可能会想:我也可以用Date.now来做这个啊。

是的,可以,但是有缺点。

Date.now以毫秒为单位返回从Unix纪元(“1970 - 01 - 01 - 01 - t00:00:00:00z")开始的时间,并且取决于系统时钟。这不仅意味着它没有那么精确,而且也不一定会递增.WebKit工程师(Tony Gentilcore)的解释如下:

也许较少考虑到的是,基于系统时间的日期也不是真正的用户监控的理想选择。大多数系统都会运行一个守护进程来定期同步时间。通常情况下,时钟每隔15 - 20分钟就会调整几毫秒。在这个速度下,大约有1%的10秒的时间间隔是不准确的。

Console.time

该API确实易于使用,只需将Console.time放在你要测量的代码前面,将控制台。timeEnd放在要测量的代码后面,即可使用相同的字符串参数调用该函数,一页上最多可以同时使用10000个计时器。

精度与性能API相同,但这又取决于浏览器。
console.time(& # 39;测试# 39;); 　　for (let 小姐:=,0;,小姐:& lt;, array.length;,我+ +),{//才能,some 代码　　} 　　console.timeEnd(& # 39;测试# 39;);
这样会自动生成易于理解的输出,如下所示:

铬输出

测试:0.766845703125毫秒

Firefox输出

测试:2 ms -计时器结束

这里的输出又与性能API非常相似。

控制台。时间的优点是易于使用,因为它不需要手动计算两个时间戳之间的差。

缩短时间精度

如果你在不同的浏览器中使用上面提到的API来测量你的函数,你可能会发现结果会有差异。

这是由于浏览器试图保护用户免受定时攻击和指纹攻击,如果时间戳太准确,黑客可以使用它来识别用户。

例如,Firefox之类的浏览器试图通过将精度降低到2女士(版本60)来防止这种情况。

需要注意的事项

现在,你已经拥有测量JavaScript函数的速度所需的工具。但是,最好避免一些陷阱。

分而治之

你注意到在过滤一些结果时有些东西很慢,但是你不知道瓶颈在哪里。

与其胡乱猜测代码中哪一部分是慢的,不如用上述这些函数来测量。
JavaScript函数的性能各种方式对比