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

除了感知代码的运行速度之外,是否有一种量化的方法来测试JavaScript的性能?


当前回答

这是一个非常老的问题,但我认为我们可以提供一个基于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]`)

其他回答

jsPerf试试。这是一个在线javascript性能测试工具,用于对代码段进行基准测试和比较。我一直在用它。

性能测试最近成了一个流行词,但这并不是说性能测试在QA中不是一个重要的过程,甚至在产品发布之后也不是。当我开发应用程序时,我使用了许多不同的工具,其中一些是上面提到的chrome Profiler,我通常会查看一个SaaS或一些开源的东西,我可以开始工作,然后忘记它,直到我收到警告,说有些东西出了问题。

有很多很棒的工具可以帮助您关注性能,而不需要您跳过一些基本的提醒设置。这里有一些我认为值得你自己去看看。

Sematext.com Datadog.com Uptime.com Smartbear.com Solarwinds.com

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

您可以使用https://github.com/anywhichway/benchtest,它用性能测试包装了现有的Mocha单元测试。

这是一个非常老的问题,但我认为我们可以提供一个基于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]`)

剖析器绝对是获取数据的好方法,但根据我的经验,对用户/客户来说,感知性能才是最重要的。例如,我们有一个带有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.