Development tool的timeLine功能,可以用來(lái)做前端的性能分析。
例如我們想分析frontend Opportunity點(diǎn)了Note tab的性能：

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

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

進(jìn)一步drill down進(jìn)去就能知道其實(shí)都是由兩個(gè)jQuery.sap.require引起的，這個(gè)無(wú)法避免。

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

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

總結(jié)

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

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