Development tool的timeLine功能,可以用來做前端的性能分析。
例如我們想分析frontend Opportunity點了Note tab的性能：

因為我們用的是UI5 framework，所以絕大多數(shù)case下如果我們沒有在自定義control里寫很多復(fù)雜的render邏輯的話，則分析前端性能只需要focus下面這些橙色的Script trace, 而剩下的其他顏色像render, layout之類都是framework cover了，我們不用操心。
例如下圖顯示點了Note tab之后，有1.6s花在script上。

這個版本的TimeLine能夠像ABAP的SAT一樣，讓使用者可以drill down到具體到底是哪一個function花費了多少時間。
比如1.6s里，我們自己寫的render方法花費了1.59s:

進一步drill down進去就能知道其實都是由兩個jQuery.sap.require引起的，這個無法避免。

同時也解釋了為什么從Note tab點回到Info再點Note花費的時間大大減少，只有0.12s,因為用jQuery.sap.require load進來的module執(zhí)行之后狀態(tài)就變成loaded,下次重復(fù)require就直接從memory里取了。

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的使用Chrome的timeline工具分析web应用性能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。