如果您需要在本地开发机器上获取函数执行时间,您可以使用浏览器的分析工具或控制台命令,例如 console.time() 和 console.timeEnd()。
所有现代浏览器都内置了 JavaScript 分析器。这些分析器应该提供最准确的测量结果,因为您不必修改现有代码,这可能会影响函数的执行时间。
要分析您的 JavaScript:
- 在 Chrome 中,按 F12 并选择 Profiles 选项卡,然后收集 JavaScript CPU 配置文件。李>
- 在 Firefox 中,安装/打开 Firebug,然后单击 Profile 按钮。
- 在 IE 9+ 中,按 F12,点击 Script 或 Profiler(取决于您的即)。
或者,在您的开发机器上,您可以使用console.time() 和console.timeEnd() 将检测添加到您的代码中。这些功能在 Firefox11+、Chrome2+ 和 IE11+ 中受支持,报告您通过 console.time() 启动/停止的计时器。 time() 将用户定义的计时器名称作为参数,然后timeEnd() 报告自计时器启动以来的执行时间:
function a() {
console.time("mytimer");
... do stuff ...
var dur = console.timeEnd("myTimer"); // NOTE: dur only works in FF
}
请注意,只有 Firefox 在 timeEnd() 调用中返回经过的时间。其他浏览器只是将结果报告给开发者控制台:timeEnd() 的返回值未定义。
如果您想在野外获得函数执行时间,您将不得不检测您的代码。你有几个选择。您可以通过查询new Date().getTime() 来保存开始和结束时间:
function a() {
var start = new Date().getTime();
... do stuff ...
var end = new Date().getTime();
var dur = end - start;
}
但是,Date 对象只有毫秒分辨率,并且会受到任何操作系统的系统时钟变化的影响。在现代浏览器中,有更好的选择。
更好的选择是使用High Resolution Time,也就是window.performance.now()。 now() 在两个重要方面优于传统的Date.getTime():
now() 是具有亚毫秒分辨率的双精度数,表示自页面导航开始以来的毫秒数。它以小数形式返回微秒数(例如,1000.123 的值是 1 秒和 123 微秒)。
-
now() 单调递增。这很重要,因为Date.getTime() 可以可能在后续调用中向前甚至向后跳跃。值得注意的是,如果操作系统的系统时间被更新(例如原子钟同步),Date.getTime() 也会被更新。 now() 保证始终单调递增,因此不受操作系统系统时间的影响——它始终是挂钟时间(假设你的挂钟不是原子的……)。
李>
now() 几乎可以在new Date().getTime()、+ new Date 和Date.now() 所在的所有地方使用。例外是 Date 和 now() 时间不能混合,因为 Date 基于 unix-epoch(自 1970 年以来的毫秒数),而 now() 是自页面导航开始以来的毫秒数(所以它会比Date 小很多)。
这里是一个如何使用now()的例子:
function a() {
var start = window.performance.now();
... do stuff ...
var end = window.performance.now();
var dur = end - start;
}
Chrome stable、Firefox 15+ 和 IE10 支持now()。还有几个polyfills 可用。
另一个衡量执行时间的选项是UserTiming。 UserTiming 的行为与console.time() 和console.timeEnd() 类似,但它使用now() 使用的相同高分辨率时间戳(因此您可以获得亚毫秒单调递增的时钟),并将时间戳和持续时间保存到PerformanceTimeline。
UserTiming 有 marks(时间戳)和 measures(持续时间)的概念。您可以根据需要定义任意多个,它们会显示在 PerformanceTimeline 上。
要保存时间戳,请调用 mark(startMarkName)。要获取自您第一次标记以来的持续时间,您只需致电 measure(measurename, startMarkname)。然后,持续时间会与您的标记一起保存在 PerformanceTimeline 中。
function a() {
window.performance.mark("start");
... do stuff ...
window.performance.measure("myfunctionduration", "start");
}
// duration is window.performance.getEntriesByName("myfunctionduration", "measure")[0];
UserTiming 在 IE10+ 和 Chrome25+ 中可用。还有一个polyfill 可用(我写的)。