我们如何性能测试JavaScript代码?
CPU周期,内存使用率,执行时间等?
补充:除了了解代码运行的速度之外,还有定量的测试JavaScript性能的方法吗?
解决方案
黄金法则是在任何情况下均不得锁定用户浏览器。在那之后,我通常会先看执行时间,然后看内存使用情况(除非我们做了疯狂的事情,在这种情况下,它可能是更高的优先级)。
我发现执行时间是最好的方法。
我们可以使用以下网址:http://getfirebug.com/js.html。它具有JavaScript的探查器。
有人建议使用特定的插件和/或者浏览器。我不会,因为它们仅对那个平台有用。在Firefox上运行的测试无法正确转换为IE7. 考虑到99.999999%的网站有一个以上的浏览器访问它们,因此我们需要检查所有流行平台上的性能。
我的建议是将其保留在JS中。创建一个包含所有JS测试并定时执行的基准测试页面。我们甚至可以使用AJAX将结果发布回给我们,以使其完全自动化。
然后,只需冲洗并在不同的平台上重复即可。
探查器绝对是获取数字的一种好方法,但是根据我的经验,感知的性能对用户/客户端至关重要。例如,我们有一个带有Ext手风琴的项目,该项目已展开以显示一些数据,然后显示一些嵌套的Ext网格。实际上,所有内容的渲染速度都非常快,没有一项操作花费很长时间,一次只能渲染很多信息,因此用户感觉很慢。
我们不是通过切换到更快的组件或者优化某种方法来"修复"此问题,而是首先渲染数据,然后使用setTimeout渲染网格。因此,信息首先出现,然后第二个网格弹出。总体而言,以这种方式花费了更多的处理时间,但是对于用户而言,感知性能得到了改善。
编辑:这个答案现在是7岁。如今,Chrome分析器和其他工具已普遍可用且易于使用,例如console.time(),console.profile()和performance.now()。 Chrome还为我们提供了一个时间轴视图,该视图可以显示导致帧速率降低的原因,用户可能正在等待的位置等。
查找所有这些工具的文档确实非常容易,我们不需要一个SO答案。 7年后,我仍然会重复我最初答案的建议,并指出我们可以让用户永远不会注意到的地方永远运行缓慢的代码,而在用户注意到的地方却可以运行相当快的代码,而他们会抱怨相当快的代码不够快。或者我们对服务器API的请求花费了220毫秒。或者类似的东西。重点仍然是,如果我们带出探查器并去寻找工作要做,我们会找到它,但这可能不是用户需要的工作。
我认为JavaScript性能(时间)测试已经足够。我在这里找到了有关JavaScript性能测试的非常方便的文章。
我通常只测试javascript性能,脚本运行多长时间。 jQuery Lover提供了一个很好的文章链接来测试javascript代码的性能,但是本文仅显示了如何测试javascript代码的运行时间。我还建议阅读一篇名为"在处理巨大数据集时改进jQuery代码的5条技巧"的文章。
我们总是可以通过简单的日期对象来衡量任何函数所花费的时间。
var start = +new Date(); // log start timestamp function1(); var end = +new Date(); // log end timestamp var diff = end - start;
JSLitmus是用于创建临时JavaScript基准测试的轻量级工具
让我们检查一下函数表达式和函数构造器之间的性能:
<script src="JSLitmus.js"></script> <script> JSLitmus.test("new Function ... ", function() { return new Function("for(var i=0; i<100; i++) {}"); }); JSLitmus.test("function() ...", function() { return (function() { for(var i=0; i<100; i++) {} }); }); </script>
我在上面所做的是创建一个执行相同操作的函数表达式和函数构造函数。结果如下:
FireFox性能结果
IE性能结果