前端性能優化之Performance神器

　　對Chrome控制檯有必定的瞭解的朋友都在知道，Network面板會包括不少網絡請求方面的東西，包括Http相關的Request信息，Response信息，以及Cookies等等，都是前端開發須要密切關注的問題。
　　這些信息都是屬於功能性的，那麼當咱們的功能需求知足後，勢必須要對於性能進行優化，有什麼工具能夠幫助咱們進行分析呢？答案就是Chrome控制檯的Performance面板。
　　須要注意的一點是，Performance面板下的功能，是對於細節中的細節進行的優化。其中包含：

1.FPS,CPU和NET的使用狀況？
2.頁面的前1毫秒和後1毫秒網絡任務是怎樣？
3.Javascript代碼的執行消耗時間，顯卡負載狀況等？
4.瀏覽器對頁面的繪製精確到毫秒級的狀況？

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

　　所以下文咱們主要對4進行剖析，它包括4個分析面板，確定有各自的意思在其中。

　　先來分析Summary面板，和其字面意思同樣，這是總結面板。從宏觀層面歸納了瀏覽器加載的總時間，包括:

顏色	英文	中文
藍色	Loading	記載
黃色	Scripting	腳本
紫色	Rendering	渲染
綠色	Painting	繪製
深灰	Other	其餘
淺灰	其餘	未熄火（空閒）

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

　　值得注意的是，這裏的Group面板很是有用。咱們能夠很清晰明瞭得分析按照活動，目錄，域，子域，URL和Frame進行分組的前端性能。對於開發很是有幫助。

　　其實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是事件驅動型，這對於之後學習Nodejs有很大的幫助。

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

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

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

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

　　最後說一下Event Log ，顧名思義就是事件日誌的意思，能夠很方便的選擇想查看的某一階段的日誌。

　　
　　其實個人這篇博客沒有特別深刻的講解了瀏覽器渲染機制，只是簡單介紹了一下Performance如何使用，你們能夠先看下Alon大牛的這篇瀏覽器前端優化，這篇博客乾貨很是多。
　　你們也都注意到了，Performance工具當中，包含了許多方便Nodejs開發的工具。我斗膽猜測，這可能真的是大前端的味道。前端再也不是傳統的UI層面或者操做DOM，而是擔任了更多的角色。前端熱潮中的mvvm三框架，vue，react以及angular，都有不少後端的思想。
　　有心的同窗能夠發現，餓了麼大前端團隊的文章，大多都是nodejs相關，對於後端瞭解較少的同窗學起來會很是困難。同窗在點我達，他們正在籌劃改組成大前端團隊。咱們公司都沒有ios和安卓，而是有一個相似大前端的開發支持部。因此說，這呈現出一個趨勢，將來優秀的的前端工程師，後端Nodejs必不可少。
　　關於Performance，暫時淺嘗輒止到這裏，我想這對本身，以及每一個閱讀了這篇博客的前端工程師，未來會有或多或少的幫助。
參考文檔：
https://developers.google.com...
https://stackoverflow.com/que...
https://developers.google.com...
http://colobu.com/2015/04/07/...