Chrome DevTools 小贴士

36. 自定义时间测量API

2021-03-27  本文已影响0人  阿啦啦啦啦啦

Performance 面板就是以前的timeline面板。用于可视化分析代码性能。js提供了对应的API用于分析
https://developer.mozilla.org/zh-CN/docs/Web/API/User_Timing_API

user-timing-performance.gif

您可以使用User Timing API查找缓慢的JavaScript代码。

尝试包装可能缓慢的代码,如下所示:

performance.mark('costlyFunction Start') // 起始标记

costlyFunction()

performance.mark('costlyFunction End') // 终止标记

performance.measure(
    'costlyFunction', // 性能测量名称,会在时间线显示
    'costlyFunction Start',  起始标记
    'costlyFunction End' 终止标记
)

使用性能API有以下好处

补充

我们做性能录制的时候,系统获取资源,事件触发的时候,内部就是调用的这个API。Chrome选择暴露给我们,让我们在录制的时候,可以更快的找到我们想分析的部分,有针对性的分析我们想分析的代码段。我们还能做监控,当代码执行达不到我们预期的效率的时候,触发上报机制,上报到监控系统。

上一篇 下一篇

猜你喜欢

热点阅读