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

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