你如何测试JavaScript代码？

Question

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

补充：除了只知道代码的运行速度之外，是否有一种测试JavaScript性能的定量方法？

Answer 1

Profilers绝对是获取数字的好方法，但根据我的经验，感知到的性能对用户/客户来说都很重要。例如，我们有一个带有Ext手风琴的项目，该手风琴扩展为显示一些数据，然后是一些嵌套的Ext网格。一切实际上都是渲染速度非常快，没有一次操作花费很长时间，只有很多信息一次全部渲染，所以对用户来说感觉很慢。

我们“修复”了这一点，而不是通过切换到更快的组件，或优化某些方法，而是首先渲染数据，然后使用setTimeout渲染网格。因此，首先出现信息，然后网格会在一秒钟后出现。总的来说，这样做需要稍微多一点的处理时间，但对用户而言，感知性能得到了提升。

---

目前，Chrome分析器和其他工具普遍可用且易于使用，console.time()，console.profile()和performance.now()也是如此。 Chrome还为您提供了一个时间线视图，可以显示杀死帧速率，用户可能在哪里等待的内容等。

查找所有这些工具的文档非常简单，您不需要SO答案。 7年后，我仍然会重复我原来答案的建议，并指出你可以让代码慢速运行，用户不会注意到它，并且代码运行速度非常快，他们会抱怨相当快的代码不够快。或者您对服务器API的请求花了220毫秒。或者类似的东西。问题仍然是，如果你拿出一个分析器并去寻找工作，你会发现它，但它可能不是你的用户需要的工作。

Answer 2

我同意感知到的表现真的很重要。但有时我只是想知道做某事的方法更快。有时差异很大，值得了解。

你可以使用javascript计时器。但我通常使用原生Chrome（现在也在Firefox和Safari中）使用devTool方法console.time()＆amp; 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')

更新（2016年4月4日）：

Chrome canary最近添加了Line Level Profiling开发工具来源标签，让您可以准确了解每条线执行的时间长度！

Answer 3

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

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

Answer 4

试试jsPerf。它是一个在线JavaScript性能工具，用于基准测试和比较代码片段。我一直都在使用它。

Answer 5

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

<强>用法

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

<强>参考

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()
• http://www.w3.org/TR/hr-time/#dom-performance-now

Answer 6

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

Answer 7

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

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

然后在不同的平台上冲洗并重复。

Answer 8

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

JavaScript Speed Test

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

Answer 9

我认为JavaScript性能（时间）测试已经足够了。我找到了一篇关于JavaScript performance testing here的非常方便的文章。

Answer 10

你可以使用这个：http://getfirebug.com/js.html。它有一个JavaScript的分析器。

Answer 11

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

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

Answer 12

我发现执行时间是最佳衡量标准。

Answer 13

快速回答

在jQuery上（更具体地说是在Sizzle上），我们在您的浏览器上使用this（checkout master和open speed / index.html），然后使用benchmark.js。这用于对库进行性能测试。

答案很长

如果读者不知道基准，工作负载和分析器之间的区别，请首先阅读"readme 1st" section of spec.org上的一些性能测试基础。这是用于系统测试，但理解这个基础也将有助于JS perf测试。一些亮点：

  

什么是基准？

     

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

     

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

     

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

     

如果不是我自己的应用程序，那么呢？

     

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

     

注意：标准化基准可以作为参考点。然而，当您选择供应商或产品时，SPEC并未声称任何标准化基准测试都可以替代您自己的实际应用程序。

性能测试JS

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

如果这不可行（通常不可行）。第一个重要步骤：定义您的工作量。它应该反映您的应用程序的工作量。在this talk中，Vyacheslav Egorov谈到了你应该避免的糟糕工作量。

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

如果某些内容表现非常糟糕，那么下一步就是寻找瓶颈。

如何找到瓶颈？廓

What is the best way to profile javascript execution?

Answer 14

您可以在萤火虫中使用console.profile

Answer 15

我通常只测试javascript性能，脚本运行多长时间。 jQuery Lover为测试javascript code performance提供了一篇很好的文章链接，但文章只展示了如何测试javascript代码运行的时间。我还建议在处理大量数据集时阅读一篇名为“improving your jQuery code上的5个提示”的文章。

Answer 16

UX Profiler从用户角度解决了这个问题。它将一些用户操作（点击）引起的所有浏览器事件，网络活动等分组，并考虑到延迟，超时等所有方面。

Answer 17

这是一个可重复使用的时间表。示例包含在代码中：

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

Answer 18

您可以使用https://github.com/anywhichway/benchtest将现有的Mocha单元测试与性能测试一起包装。

Answer 19

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

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

Answer 20

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

Answer 21

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

https://jsbench.me/

它允许进行左右比较，然后您还可以共享结果。

Answer 22

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

有许多很棒的工具可以帮助您关注性能，而不必为了设置一些基本的警报而无所不用其极。我认为有一些值得您亲自检查的地方。

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

要尝试画出更清晰的图片，here是一个有关如何为React应用程序设置监视的小教程。

Answer 23

performance.mark (Chrome 87 ^)

performance.mark('initSelect - start');
initSelect();
performance.mark('initSelect - end');