您如何性能测试JavaScript代码?

2020/10/02 04:21 · javascript ·  · 0评论

CPU周期,内存使用率,执行时间等?

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

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

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


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

查找所有这些工具的文档确实很容易,您无需为此提供任何答案。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;

参考文献

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

让检查之间的性能function expressionfunction 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 expressionfunction constructor执行相同的操作。结果如下:

FireFox性能结果

FireFox性能结果

IE性能结果

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

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

https://jsbench.me/

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

我通常只测试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从用户角度解决了此问题。它对由某些用户操作(点击)引起的所有浏览器事件,网络活动等进行分组,并考虑所有方面,例如延迟,超时等。

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

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

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

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

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

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

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

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);
本文地址:http://javascript.askforanswer.com/ninruhexingnengceshijavascriptdaima.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!