前端性能優(yōu)化之Performance神器

qujian 發(fā)布于2019-08-20 17:22 / 993人閱讀

摘要：需要注意的一點是，面板下的功能，是對于細(xì)節(jié)中的細(xì)節(jié)進行的優(yōu)化。我們可以很清晰明了得分析按照活動，目錄，域，子域，和進行分組的前端性能。個人理解的話，前者類似事件冒泡，后者類似事件捕獲。同學(xué)在點我達(dá)，他們正在籌劃改組成大前端團隊。

　　對Chrome控制臺有一定的了解的朋友都在知道，Network面板會包括很多網(wǎng)絡(luò)請求方面的東西，包括Http相關(guān)的Request信息，Response信息，以及Cookies等等，都是前端開發(fā)需要密切關(guān)注的問題。
　　這些信息都是屬于功能性的，那么當(dāng)我們的功能需求滿足后，勢必需要對于性能進行優(yōu)化，有什么工具可以幫助我們進行分析呢？答案就是Chrome控制臺的Performance面板。
　　需要注意的一點是，Performance面板下的功能，是對于細(xì)節(jié)中的細(xì)節(jié)進行的優(yōu)化。其中包含：

1.FPS,CPU和NET的使用情況？
2.頁面的前1毫秒和后1毫秒網(wǎng)絡(luò)任務(wù)是怎樣？
3.Javascript代碼的執(zhí)行消耗時間，顯卡負(fù)載情況等？
4.瀏覽器對頁面的繪制精確到毫秒級的情況？

　　這幅圖中，1，2包括了FPS，CPU，NET以及網(wǎng)頁渲染快照以及流式Network圖，直觀地淺顯地回答了1和2兩個問題，3回答了Javascript代碼的執(zhí)行消耗時間，顯卡負(fù)載情況等，4則回答了瀏覽器對頁面的繪制精確到毫秒級的情況。
　　上一篇博客中也提到了，第4步，也就是我們最關(guān)心的一步，是瀏覽器對頁面的繪制精確到毫秒級的情況，準(zhǔn)確的為我們剖析了瀏覽器加載渲染頁面的全過程。

　　因此下文我們主要對4進行剖析，它包括4個分析面板，肯定有各自的意思在其中。

　　先來分析Summary面板，和其字面意思一樣，這是總結(jié)面板。從宏觀層面概括了瀏覽器加載的總時間，包括:

顏色	英文	中文
藍(lán)色	Loading	記載
黃色	Scripting	腳本
紫色	Rendering	渲染
綠色	Painting	繪制
深灰	Other	其他
淺灰	其他	未熄火（空閑）

　　再來分析Bottom-Up面板，直接翻譯成上下很愚蠢，索性翻譯成刨根問底得了，這樣更合適。
　　Self Time和Total Time以及Activity，其中的Self Time代表函數(shù)本身執(zhí)行消耗時間，Total Time則是函數(shù)本身消耗再加上在調(diào)用它的函數(shù)中消耗的總時間，Activity不用解釋，就是瀏覽器活動的意思。

　　值得注意的是，這里的Group面板非常有用。我們可以很清晰明了得分析按照活動，目錄，域，子域，URL和Frame進行分組的前端性能。對于開發(fā)非常有幫助。

　　其實Bottom-Up和Call Tree都有各自的意思，前者是The Heavy (Bottom Up) view is available in the Bottom-Up tab，后者是And the Tree (Top Down) view is available in the Call Tree tab。個人理解的話，前者類似事件冒泡，后者類似事件捕獲。要知道，Nodejs是事件驅(qū)動型，這對于以后學(xué)習(xí)Nodejs有很大的幫助。

　　看一下二者的對比圖，很明顯可以看出，自上而下的Call-Tree更符合我們的人類正常思維，可以更直觀地分析瀏覽器對頁面的build精確到毫秒級的情況。
　　就以百度首頁進行分析。
1. 繪制階段
綜合視窗，繪制

2. 加載階段
解析樣式表，解析HTML（評估腳本，事件）

3.腳本階段
　　DOM GC（DOM垃圾回收），評估腳本，事件，Major GC（清理年老區(qū)（Tenured space）），Minor GC（每次Minor GC只會清理年輕代），Run Microtasks（運行微服務(wù)），Timer Fired（銷毀計時器），XMR Load（異步加載對象加載）。

4.渲染階段
　　視窗，升級視圖樹，重新計算樣式。

　　最后說一下Event Log ，顧名思義就是事件日志的意思，可以很方便的選擇想查看的某一階段的日志。

　　
　　其實我的這篇博客沒有特別深入的講解了瀏覽器渲染機制，只是簡單介紹了一下Performance如何使用，大家可以先看下Alon大牛的這篇瀏覽器前端優(yōu)化，這篇博客干貨非常多。
　　大家也都注意到了，Performance工具當(dāng)中，包含了許多方便Nodejs開發(fā)的工具。我斗膽猜想，這可能真的是大前端的味道。前端不再是傳統(tǒng)的UI層面或者操作DOM，而是擔(dān)任了更多的角色。前端熱潮中的mvvm三框架，vue，react以及angular，都有很多后端的思想。
　　有心的同學(xué)可以發(fā)現(xiàn)，餓了么大前端團隊的文章，大多都是nodejs相關(guān)，對于后端了解較少的同學(xué)學(xué)起來會非常困難。同學(xué)在點我達(dá)，他們正在籌劃改組成大前端團隊。我們公司都沒有ios和安卓，而是有一個類似大前端的開發(fā)支持部。所以說，這呈現(xiàn)出一個趨勢，未來優(yōu)秀的的前端工程師，后端Nodejs必不可少。
　　關(guān)于Performance，暫時淺嘗輒止到這里，我想這對自己，以及每個閱讀了這篇博客的前端工程師，將來會有或多或少的幫助。
參考文檔：
https://developers.google.com...
https://stackoverflow.com/que...
https://developers.google.com...
http://colobu.com/2015/04/07/...