如果需要在本地开发机器上获得函数执行时间,则可以使用浏览器的概要分析工具,也可以使用控制台命令,例如console.time()
和console.timeEnd()
。
所有现代浏览器都内置了JavaScript分析器。这些分析器应该提供最准确的测量结果,因为您不必修改现有代码,这可能会影响函数的执行时间。
剖析JavaScript:
- 在Chrome中,按F12并选择“ 配置文件”标签,然后选择“ 收集JavaScript CPU配置文件”。
- 在Firefox中,安装/打开Firebug,然后单击“ 配置文件”按钮。
- 在IE 9+中,按F12,单击“ 脚本”或“ 探查器”(取决于您的IE版本)。
另外,在您的开发机器上,您可以使用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
对象只有毫秒级的分辨率,并且会受到任何操作系统的系统时钟更改的影响。在现代浏览器中,有一个更好的选择。
更好的选择是使用高分辨率时间(又名)window.performance.now()
。 在两个重要方面now()
优于传统Date.getTime()
:
now()
是具有毫秒级分辨率的双精度型,表示自页面导航开始以来的毫秒数。它以分数形式返回微秒数(例如,值1000.123为1秒和123微秒)。
now()
在单调增加。因为这是重要的Date.getTime()
可可能是跳跃式前进或后退,甚至在随后的调用。值得注意的是,如果OS的系统时间已更新(例如原子时钟同步),Date.getTime()
则也会更新。 now()
保证总是单调增加,因此它不受操作系统系统时间的影响-始终是挂钟时间(假设挂钟不是原子钟...)。
now()
几乎可以在任何地方使用new Date().getTime()
,+ new Date
和T 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;
}
now()
在Chrome稳定版,Firefox 15+和IE10中受支持。也有几种填充料。
在野外测量执行时间的另一种选择是UserTiming。UserTiming的行为与console.time()
和相似console.timeEnd()
,但是它利用了与之相同的高分辨率时间戳now()
(因此您得到了亚毫秒级的单调递增时钟),并将时间戳和持续时间保存到PerformanceTimeline。
UserTiming具有标记(时间戳)和度量(持续时间)的概念。您可以根据需要定义任意多个,并且它们在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];
在IE10 +和Chrome25 +中提供UserTiming。还有一个polyfill可用(我写过)。