CPU周期,内存使用情况,执行时间等等?
除了感知代码的运行速度之外,是否有一种量化的方法来测试JavaScript的性能?
CPU周期,内存使用情况,执行时间等等?
除了感知代码的运行速度之外,是否有一种量化的方法来测试JavaScript的性能?
黄金法则是在任何情况下都不要锁定用户的浏览器。在此之后,我通常会查看执行时间,然后是内存使用情况(除非您正在做一些疯狂的事情,在这种情况下,内存使用的优先级可能更高)。
有些人建议使用特定的插件和/或浏览器。我不会,因为它们只对一个平台有用;在Firefox上的测试运行不能准确地转换到IE7上。考虑到99.999999%的网站有多个浏览器访问,您需要检查所有流行平台上的性能。
我的建议是将其保留在JS中。创建一个包含所有JS测试的基准测试页面,并计时执行。您甚至可以使用ajax将结果发送给您,以保持它完全自动化。
然后在不同的平台上重复。
剖析器绝对是获取数据的好方法,但根据我的经验,对用户/客户来说,感知性能才是最重要的。例如,我们有一个带有Ext手风琴的项目,它展开来显示一些数据,然后显示一些嵌套的Ext网格。所有内容都呈现得非常快,没有一个操作需要很长时间,只是有很多信息同时呈现,所以用户感觉很慢。
我们“修复”了这个问题,不是通过切换到一个更快的组件,或优化一些方法,而是通过先呈现数据,然后用setTimeout呈现网格。所以,信息先出现,然后网格会在一秒钟后出现。总的来说,这样做需要稍微多一点的处理时间,但对于用户来说,感知性能得到了改善。
如今,Chrome分析器和其他工具普遍可用,而且易于使用 Console.time () (mozilla-docs, chrome-docs) Console.profile () (mozilla-docs, chrome-docs) performance.now () (mozilla-docs) Chrome也给你一个时间轴视图,可以告诉你什么是杀死你的帧率,用户可能在哪里等待,等等。
Finding documentation for all these tools is really easy, you don't need an SO answer for that. 7 years later, I'll still repeat the advice of my original answer and point out that you can have slow code run forever where a user won't notice it, and pretty fast code running where they do, and they will complain about the pretty fast code not being fast enough. Or that your request to your server API took 220ms. Or something else like that. The point remains that if you take a profiler out and go looking for work to do, you will find it, but it may not be the work your users need.
我通常只测试javascript的性能,脚本运行多长时间。jQuery Lover提供了一个很好的测试javascript代码性能的文章链接,但这篇文章只展示了如何测试javascript代码运行多长时间。我还推荐阅读一篇文章,题为“在处理大量数据集时改进jQuery代码的5个技巧”。
我们总是可以通过简单的date对象来测量任何函数所花费的时间。
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性能结果
下面是一个简单的函数,显示传入函数的执行时间:
var perf = function(testName, fn) {
var startTime = new Date().getTime();
fn();
var endTime = new Date().getTime();
console.log(testName + ": " + (endTime - startTime) + "ms");
}
我同意,感知到的表现真的是最重要的。但有时我只是想知道哪种方法做某事更快。有时这种差异是巨大的,值得了解。
你可以使用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金丝雀最近增加了行级别剖析开发工具的来源选项卡,让你看到每一行执行了多长时间!
这是为特定操作收集性能信息的好方法。
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);
迅速的回答
在jQuery上(更具体地说在Sizzle上),我们使用这个(签出master并在浏览器上打开speed/index.html),它反过来使用benchmark.js。这用于对库进行性能测试。
长回答
如果读者不知道基准测试、工作负载和分析器之间的区别,请先阅读spec.org的“readme 1st”部分中的一些性能测试基础知识。这是针对系统测试的,但是理解这个基础也会有助于JS的性能测试。以下是一些最突出的结果:
What is a benchmark? A benchmark is "a standard of measurement or evaluation" (Webster’s II Dictionary). A computer benchmark is typically a computer program that performs a strictly defined set of operations - a workload - and returns some form of result - a metric - describing how the tested computer performed. Computer benchmark metrics usually measure speed: how fast was the workload completed; or throughput: how many workload units per unit time were completed. Running the same computer benchmark on multiple computers allows a comparison to be made. Should I benchmark my own application? Ideally, the best comparison test for systems would be your own application with your own workload. Unfortunately, it is often impractical to get a wide base of reliable, repeatable and comparable measurements for different systems using your own application with your own workload. Problems might include generation of a good test case, confidentiality concerns, difficulty ensuring comparable conditions, time, money, or other constraints. If not my own application, then what? You may wish to consider using standardized benchmarks as a reference point. Ideally, a standardized benchmark will be portable, and may already have been run on the platforms that you are interested in. However, before you consider the results you need to be sure that you understand the correlation between your application/computing needs and what the benchmark is measuring. Are the benchmarks similar to the kinds of applications you run? Do the workloads have similar characteristics? Based on your answers to these questions, you can begin to see how the benchmark may approximate your reality. Note: A standardized benchmark can serve as reference point. Nevertheless, when you are doing vendor or product selection, SPEC does not claim that any standardized benchmark can replace benchmarking your own actual application.
性能测试JS
理想情况下,最好的性能测试是使用自己的应用程序和自己的工作负载来切换需要测试的内容:不同的库、机器等。
如果这是不可行的(通常是不可行的)。重要的第一步:定义您的工作量。它应该反映应用程序的工作负载。在这次演讲中,Vyacheslav Egorov谈到了你应该避免的糟糕工作量。
然后,你可以使用benchmark.js这样的工具来帮助你收集指标,通常是速度或吞吐量。在Sizzle上,我们感兴趣的是比较修复或更改如何影响库的系统性能。
如果某些东西执行得非常糟糕,那么下一步就是寻找瓶颈。
如何找到瓶颈?分析器
分析javascript执行情况的最佳方法是什么?
大多数浏览器现在都在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
下面是一个用于时间性能的可重用类。示例包含在代码中:
/*
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
性能测试最近成了一个流行词,但这并不是说性能测试在QA中不是一个重要的过程,甚至在产品发布之后也不是。当我开发应用程序时,我使用了许多不同的工具,其中一些是上面提到的chrome Profiler,我通常会查看一个SaaS或一些开源的东西,我可以开始工作,然后忘记它,直到我收到警告,说有些东西出了问题。
有很多很棒的工具可以帮助您关注性能,而不需要您跳过一些基本的提醒设置。这里有一些我认为值得你自己去看看。
Sematext.com Datadog.com Uptime.com Smartbear.com Solarwinds.com
为了画出更清晰的画面,这里有一个关于如何为react应用程序设置监控的小教程。
的性能。mark (Chrome 87 ^)
performance.mark('initSelect - start');
initSelect();
performance.mark('initSelect - end');
这是一个非常老的问题,但我认为我们可以提供一个基于es6的简单解决方案来快速测试你的代码。
这是用于执行时间的基本工作台。我们使用performance.now()来提高精度:
/** * Figure out how long it takes for a method to execute. * * @param {Function} method to test * @param {number} iterations number of executions. * @param {Array} list of set of args to pass in. * @param {T} context the context to call the method in. * @return {number} the time it took, in milliseconds to execute. */ const bench = (method, list, iterations, context) => { let start = 0 const timer = action => { const time = performance.now() switch (action) { case 'start': start = time return 0 case 'stop': const elapsed = time - start start = 0 return elapsed default: return time - start } }; const result = [] timer('start') list = [...list] for (let i = 0; i < iterations; i++) { for (const args of list) { result.push(method.apply(context, args)) } } const elapsed = timer('stop') console.log(`Called method [${method.name}] Mean: ${elapsed / iterations} Exec. time: ${elapsed}`) return elapsed } const fnc = () => {} const isFunction = (f) => f && f instanceof Function const isFunctionFaster = (f) => f && 'function' === typeof f class A {} function basicFnc(){} async function asyncFnc(){} const arrowFnc = ()=> {} const arrowRFnc = ()=> 1 // Not functions const obj = {} const arr = [] const str = 'function' const bol = true const num = 1 const a = new A() const list = [ [isFunction], [basicFnc], [arrowFnc], [arrowRFnc], [asyncFnc], [Array], [Date], [Object], [Number], [String], [Symbol], [A], [obj], [arr], [str], [bol], [num], [a], [null], [undefined], ] const e1 = bench(isFunction, list, 10000) const e2 = bench(isFunctionFaster, list, 10000) const rate = e2/e1 const percent = Math.abs(1 - rate)*100 console.log(`[isFunctionFaster] is ${(percent).toFixed(2)}% ${rate < 1 ? 'faster' : 'slower'} than [isFunction]`)