您如何性能测试JavaScript代码？

CPU周期，内存使用率，执行时间等？

补充：除了感知代码运行的速度之外，还有定量的测试JavaScript性能的方法吗？

探查器绝对是获取数字的好方法，但是根据我的经验，感知的性能对用户/客户端至关重要。例如，我们有一个带有Ext手风琴的项目，该项目扩展为显示一些数据，然后显示一些嵌套的Ext网格。实际上，所有内容的渲染速度都非常快，一次操作都不会花费很长时间，一次渲染的信息很多，因此用户感觉很慢。

我们不是通过切换到更快的组件或优化某种方法来“修复”此问题，而是首先渲染数据，然后使用setTimeout渲染网格。因此，信息首先出现，然后网格将在第二秒弹出。总体而言，以这种方式花费了更多的处理时间，但是对于用户而言，感知性能得到了改善。

这些天来，Chrome的探查和其他工具的普及和易于使用，因为是console.time()，console.profile()和performance.now()。Chrome还为您提供了时间轴视图，可以显示导致帧速率降低的原因，用户可能正在等待的位置等。

查找所有这些工具的文档确实非常容易，您不需要一个SO答案。7年后，我仍然会重复最初答案的建议，并指出您可以让用户永远不会注意到的地方永远运行缓慢的代码，而在用户注意到的地方却拥有非常快的代码，他们会抱怨快速的代码还不够快。或者您对服务器API的请求花费了220毫秒。或类似的东西。重点仍然是，如果您将探查器拿出来去寻找要做的工作，就会找到它，但这可能不是用户需要的工作。

我确实同意，感知性能实际上至关重要。但是有时候我只想找出哪种方法做起来更快。有时区别是巨大的，值得了解。

您可以只使用JavaScript计时器。但是我通常使用本地Chrome（现在也在Firefox和Safari中）devTool方法获得更一致的结果console.time()，console.timeEnd()

我如何使用它的示例：

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

更新（4/4/2016）：

Chrome Canary最近添加了Line Level Profiling开发工具的“来源”标签，可让您确切地了解每行执行的时间！

我们总是可以通过简单的date对象来衡量任何函数所花费的时间。

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

试试jsPerf。这是一个在线javascript性能工具，用于对代码段进行基准测试和比较。我用它所有的时间。

现在，大多数浏览器都在中实现高分辨率计时performance.now()。它优于new Date()性能测试，因为它独立于系统时钟运行。

用法

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

参考文献

• https://developer.mozilla.org/zh-CN/docs/Web/API/Performance.now（）
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus是用于创建临时JavaScript基准测试的轻量级工具

让检查之间的性能function expression和function constructor：

<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>

我在上面所做的是创建一个function expression并function constructor执行相同的操作。结果如下：

FireFox性能结果

IE性能结果

有人建议使用特定的插件和/或浏览器。我不会因为他们是唯一真正为一个有用的平台; 在Firefox上运行的测试无法正确转换为IE7。考虑到99.999999％的网站有一个以上的浏览器访问它们，您需要检查所有流行平台上的性能。

我的建议是将此保留在JS中。创建一个基准测试页面，其中包含所有JS测试并计时执行时间。您甚至可以使用AJAX将结果发布回给您，以使其完全自动化。

然后，只需冲洗并在不同的平台上重复即可。

我有一个小型工具，可以在浏览器中快速运行小型测试用例并立即获得结果：

JavaScript速度测试

您可以使用代码，并找出在经过测试的浏览器中哪种技术更好。

我认为JavaScript性能（时间）测试已经足够。我在这里找到了有关JavaScript性能测试的非常方便的文章。

这是一个简单的函数，显示传入的函数的执行时间：

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

您可以使用：http : //getfirebug.com/js.html。它具有JavaScript的探查器。

快速回答

在jQuery（更具体地说是在Sizzle上）上，我们使用它（签出母版并在浏览器上打开speed / index.html），而后者又使用了Benchmark.js。这用于对库进行性能测试。

长答案

如果读者不知道基准测试，工作负载和事件探查器之间的区别，请首先阅读spec.org的“ readme 1st”部分的一些性能测试基础。这是用于系统测试，但是了解这些基础也将有助于JS性能测试。一些重点：

什么是基准？

基准是“衡量或评估的标准”（韦伯斯特II词典）。计算机基准测试通常是一种计算机程序，它执行一组严格定义的操作-工作负载-并返回某种形式的结果-指标-描述被测计算机的性能。计算机基准测试指标通常衡量速度：工作负载完成的速度；或吞吐量：每单位时间完成多少工作量单位。在多台计算机上运行同一计算机基准测试可以进行比较。

我应该对自己的应用程序进行基准测试吗？

理想情况下，系统的最佳比较测试将是您自己的应用程序和自己的工作量。不幸的是，使用自己的应用程序和自己的工作量为不同的系统获得广泛的可靠，可重复和可比较的测量结果通常是不切实际的。问题可能包括生成好的测试用例，机密性问题，难以确保可比的条件，时间，金钱或其他限制。

如果不是我自己的应用程序，那又如何？

您不妨考虑使用标准化基准作为参考点。理想情况下，标准化基准测试将是可移植的，并且可能已经在您感兴趣的平台上运行。但是，在考虑结果之前，需要确保您了解应用程序/计算需求与所需要处理的内容之间的相关性。基准正在衡量。基准测试与您运行的应用程序类型相似吗？工作负载是否具有相似的特征？根据对这些问题的回答，您可以开始查看基准如何近似您的现实。

注意：标准化基准可以用作参考点。但是，当您进行供应商或产品选择时，SPEC并不声称任何标准化的基准都可以替代您自己的实际应用基准。

性能测试JS

理想情况下，最好的性能测试是使用自己的应用程序和自己的工作负载来切换需要测试的内容：不同的库，机器等。

如果这不可行（通常是不可行）。重要的第一步：定义工作量。它应该反映您的应用程序的工作量。在本次演讲中，Vyacheslav Egorov讨论了您应避免的繁琐工作负载。

然后，您可以使用Benchmark.js之类的工具来帮助您收集指标，通常是速度或吞吐量。在Sizzle上，我们有兴趣比较修复或更改如何影响库的系统性能。

如果某件事确实表现不佳，那么下一步就是寻找瓶颈。

如何找到瓶颈？分析器

剖析javascript执行的最佳方法是什么？

我发现执行时间是最好的方法。

您可以在firebug中使用console.profile

我通常只测试javascript性能，脚本运行多长时间。jQuery Lover提供了一个很好的文章链接来测试javascript代码的性能，但是本文仅显示了如何测试javascript代码的运行时间。我还建议阅读一篇名为“ 在处理巨大数据集时改进jQuery代码的 5条技巧”的文章。

这是时间性能的可重用类。示例包含在代码中：

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX Profiler从用户角度解决了此问题。它对由某些用户操作（点击）引起的所有浏览器事件，网络活动等进行分组，并考虑所有方面，例如延迟，超时等。

我在寻找相似的东西，但是发现了这个。

https://jsbench.me/

它允许进行侧面比较，然后您也可以共享结果。

黄金法则是在任何情况下均不得锁定用户浏览器。在那之后，我通常会先看执行时间，然后看内存使用情况（除非您做了疯狂的事情，在这种情况下，它可能是更高的优先级）。

最近，性能测试已成为流行语，但这并不是说性能测试在质量保证中或产品出厂后并不是重要的过程。在开发应用程序时，我使用了许多不同的工具，其中有些是上面提到的工具，例如chrome Profiler，我通常会看一下SaaS或一些我可以使用的开源软件，而忘记了它，直到我得到警告，说有些事情变得不堪设想为止。 。

有很多很棒的工具可以帮助您随时关注性能，而不必仅仅为了获得一些基本的警报而跳过障碍。我认为有一些值得您亲自检查。

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

为了画出更清晰的图片，这里有一个关于如何为React应用程序设置监视的小教程。

这是收集特定操作性能信息的好方法。

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);