使用Chrome的timeline工具分析web应用性能

50 阅读1分钟

Development tool的timeLine功能,可以用来做前端的性能分析。
例如我们想分析frontend Opportunity点了Note tab的性能:

clipboard1

因为我们用的是UI5 framework,所以绝大多数case下如果我们没有在自定义control里写很多复杂的render逻辑的话,则分析前端性能只需要focus下面这些橙色的Script trace, 而剩下的其他颜色像render, layout之类都是framework cover了,我们不用操心。
例如下图显示点了Note tab之后,有1.6s花在script上。

clipboard2

这个版本的TimeLine能够像ABAP的SAT一样,让使用者可以drill down到具体到底是哪一个function花费了多少时间。
比如1.6s里,我们自己写的render方法花费了1.59s:

clipboard3

进一步drill down进去就能知道其实都是由两个jQuery.sap.require引起的,这个无法避免。

clipboard4

clipboard5

同时也解释了为什么从Note tab点回到Info再点Note花费的时间大大减少,只有0.12s,因为用jQuery.sap.require load进来的module执行之后状态就变成loaded,下次重复require就直接从memory里取了。

clipboard6

要获取更多Jerry的原创文章,请关注公众号"汪子熙":