前端性能優化之Performance神器

qujian 發布于2019-08-20 17:22 / 999人閱讀

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

　　對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/...

云服務器 GPU云服務器前端性能優化前端開發性能優化性能優化前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83529.html

2017-06-20 前端日報

摘要：前端日報精選專題之跟著學節流冴羽的博客全家桶仿微信項目，支持多人在線聊天和機器人聊天騰訊前端團隊社區編碼的奧秘模塊實現入門淺析知乎專欄前端每周清單發布新版本提升應用性能的方法中文寇可往吾亦可往用實現對決支付寶的微信企業付款到零 2017-06-20 前端日報精選 JavaScript專題之跟著 underscore 學節流 - 冴羽的JavaScript博客 - SegmentFau...

Galence 2019-08-20 17:23 評論0 收藏0
優秀文章收藏（慢慢消化）持續更新~

摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0
前端質量監控之頁面性能相關

摘要：前言最近有幸參與一個前端質量監控類項目的重構，算是個人初次接觸到前端質量監控相關的知識，對于其中的性能統計部分很感興趣，查詢資料之后寫了文章，作為個人學習記錄，如有錯誤，敬請斧正頁面整體性能通過瀏覽器提供的方法，我們能夠得到網頁每個處理階段前言最近有幸參與一個前端質量監控類項目的重構，算是個人初次接觸到前端質量監控相關的知識，對于其中的性能統計部分很感興趣，查詢資料之后寫了文章，作...

Shihira 2019-08-23 12:56 評論0 收藏0
1月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享視頻前端技術論壇融合不可錯過的迷你庫測試框架實例教程為你詳細解讀請求頭的具體含意解析的庫如果要用前端框架，開發流程是怎樣的與有什么區別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術中更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 評論0 收藏0
前端知識普及之頁面加載

摘要：如果你的文件涉及操作，可以直接在里面添加回調函數，或者說基本上我們的文件都可以寫在里面進行調用其實，這和我們將文件放在底部，在上面加以及異步加載文件的效果是一樣一樣的。如果大家想繼續看下面的內容的話，有一個要求，就是回答我一個問題:你這樣寫過代碼嗎？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 評論0 收藏0