資訊專(zhuān)欄INFORMATION COLUMN
摘要：需要注意的一點(diǎn)是，面板下的功能，是對(duì)于細(xì)節(jié)中的細(xì)節(jié)進(jìn)行的優(yōu)化。我們可以很清晰明了得分析按照活動(dòng)，目錄，域，子域，和進(jìn)行分組的前端性能。個(gè)人理解的話(huà)，前者類(lèi)似事件冒泡，后者類(lèi)似事件捕獲。同學(xué)在點(diǎn)我達(dá)，他們正在籌劃改組成大前端團(tuán)隊(duì)。
對(duì)Chrome控制臺(tái)有一定的了解的朋友都在知道，Network面板會(huì)包括很多網(wǎng)絡(luò)請(qǐng)求方面的東西，包括Http相關(guān)的Request信息，Response信息，以及Cookies等等，都是前端開(kāi)發(fā)需要密切關(guān)注的問(wèn)題。
這些信息都是屬于功能性的，那么當(dāng)我們的功能需求滿(mǎn)足后，勢(shì)必需要對(duì)于性能進(jìn)行優(yōu)化，有什么工具可以幫助我們進(jìn)行分析呢？答案就是Chrome控制臺(tái)的Performance面板。
需要注意的一點(diǎn)是，Performance面板下的功能，是對(duì)于細(xì)節(jié)中的細(xì)節(jié)進(jìn)行的優(yōu)化。其中包含：
1.FPS,CPU和NET的使用情況？ 2.頁(yè)面的前1毫秒和后1毫秒網(wǎng)絡(luò)任務(wù)是怎樣？ 3.Javascript代碼的執(zhí)行消耗時(shí)間，顯卡負(fù)載情況等？ 4.瀏覽器對(duì)頁(yè)面的繪制精確到毫秒級(jí)的情況？
這幅圖中，1，2包括了FPS，CPU，NET以及網(wǎng)頁(yè)渲染快照以及流式Network圖，直觀(guān)地淺顯地回答了1和2兩個(gè)問(wèn)題，3回答了Javascript代碼的執(zhí)行消耗時(shí)間，顯卡負(fù)載情況等，4則回答了瀏覽器對(duì)頁(yè)面的繪制精確到毫秒級(jí)的情況。
上一篇博客中也提到了，第4步，也就是我們最關(guān)心的一步，是瀏覽器對(duì)頁(yè)面的繪制精確到毫秒級(jí)的情況，準(zhǔn)確的為我們剖析了瀏覽器加載渲染頁(yè)面的全過(guò)程。
因此下文我們主要對(duì)4進(jìn)行剖析，它包括4個(gè)分析面板，肯定有各自的意思在其中。
先來(lái)分析Summary面板，和其字面意思一樣，這是總結(jié)面板。從宏觀(guān)層面概括了瀏覽器加載的總時(shí)間，包括:
| 顏色 | 英文 | 中文 |
|---|---|---|
| 藍(lán)色 | Loading | 記載 |
| 黃色 | Scripting | 腳本 |
| 紫色 | Rendering | 渲染 |
| 綠色 | Painting | 繪制 |
| 深灰 | Other | 其他 |
| 淺灰 | 其他 | 未熄火（空閑） |
再來(lái)分析Bottom-Up面板，直接翻譯成上下很愚蠢，索性翻譯成刨根問(wèn)底得了，這樣更合適。
Self Time和Total Time以及Activity，其中的Self Time代表函數(shù)本身執(zhí)行消耗時(shí)間，Total Time則是函數(shù)本身消耗再加上在調(diào)用它的函數(shù)中消耗的總時(shí)間，Activity不用解釋?zhuān)褪菫g覽器活動(dòng)的意思。
值得注意的是，這里的Group面板非常有用。我們可以很清晰明了得分析按照活動(dòng)，目錄，域，子域，URL和Frame進(jìn)行分組的前端性能。對(duì)于開(kāi)發(fā)非常有幫助。
其實(shí)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。個(gè)人理解的話(huà)，前者類(lèi)似事件冒泡，后者類(lèi)似事件捕獲。要知道，Nodejs是事件驅(qū)動(dòng)型，這對(duì)于以后學(xué)習(xí)Nodejs有很大的幫助。
看一下二者的對(duì)比圖，很明顯可以看出，自上而下的Call-Tree更符合我們的人類(lèi)正常思維，可以更直觀(guān)地分析瀏覽器對(duì)頁(yè)面的build精確到毫秒級(jí)的情況。
就以百度首頁(yè)進(jìn)行分析。
1. 繪制階段
綜合視窗，繪制
2. 加載階段
解析樣式表，解析HTML（評(píng)估腳本，事件）
3.腳本階段
DOM GC（DOM垃圾回收），評(píng)估腳本，事件，Major GC（清理年老區(qū)（Tenured space）），Minor GC（每次Minor GC只會(huì)清理年輕代），Run Microtasks（運(yùn)行微服務(wù)），Timer Fired（銷(xiāo)毀計(jì)時(shí)器） ，XMR Load（異步加載對(duì)象加載）。
4.渲染階段
視窗，升級(jí)視圖樹(shù)，重新計(jì)算樣式。
最后說(shuō)一下Event Log ，顧名思義就是事件日志的意思，可以很方便的選擇想查看的某一階段的日志。
其實(shí)我的這篇博客沒(méi)有特別深入的講解了瀏覽器渲染機(jī)制，只是簡(jiǎn)單介紹了一下Performance如何使用，大家可以先看下Alon大牛的這篇瀏覽器前端優(yōu)化，這篇博客干貨非常多。
大家也都注意到了，Performance工具當(dāng)中，包含了許多方便Nodejs開(kāi)發(fā)的工具。我斗膽猜想，這可能真的是大前端的味道。前端不再是傳統(tǒng)的UI層面或者操作DOM，而是擔(dān)任了更多的角色。前端熱潮中的mvvm三框架，vue，react以及angular，都有很多后端的思想。
有心的同學(xué)可以發(fā)現(xiàn)，餓了么大前端團(tuán)隊(duì)的文章，大多都是nodejs相關(guān)，對(duì)于后端了解較少的同學(xué)學(xué)起來(lái)會(huì)非常困難。同學(xué)在點(diǎn)我達(dá)，他們正在籌劃改組成大前端團(tuán)隊(duì)。我們公司都沒(méi)有ios和安卓，而是有一個(gè)類(lèi)似大前端的開(kāi)發(fā)支持部。所以說(shuō)，這呈現(xiàn)出一個(gè)趨勢(shì)，未來(lái)優(yōu)秀的的前端工程師，后端Nodejs必不可少。
關(guān)于Performance，暫時(shí)淺嘗輒止到這里，我想這對(duì)自己，以及每個(gè)閱讀了這篇博客的前端工程師，將來(lái)會(huì)有或多或少的幫助。
參考文檔：
https://developers.google.com...
https://stackoverflow.com/que...
https://developers.google.com...
http://colobu.com/2015/04/07/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83529.html
摘要：前端日?qǐng)?bào)精選專(zhuān)題之跟著學(xué)節(jié)流冴羽的博客全家桶仿微信項(xiàng)目，支持多人在線(xiàn)聊天和機(jī)器人聊天騰訊前端團(tuán)隊(duì)社區(qū)編碼的奧秘模塊實(shí)現(xiàn)入門(mén)淺析知乎專(zhuān)欄前端每周清單發(fā)布新版本提升應(yīng)用性能的方法中文寇可往吾亦可往用實(shí)現(xiàn)對(duì)決支付寶的微信企業(yè)付款到零 2017-06-20 前端日?qǐng)?bào) 精選 JavaScript專(zhuān)題之跟著 underscore 學(xué)節(jié)流 - 冴羽的JavaScript博客 - SegmentFau...
摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類(lèi)面試問(wèn)題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要：前言最近有幸參與一個(gè)前端質(zhì)量監(jiān)控類(lèi)項(xiàng)目的重構(gòu)，算是個(gè)人初次接觸到前端質(zhì)量監(jiān)控相關(guān)的知識(shí)，對(duì)于其中的性能統(tǒng)計(jì)部分很感興趣，查詢(xún)資料之后寫(xiě)了文章，作為個(gè)人學(xué)習(xí)記錄，如有錯(cuò)誤，敬請(qǐng)斧正頁(yè)面整體性能通過(guò)瀏覽器提供的方法，我們能夠得到網(wǎng)頁(yè)每個(gè)處理階段 前言 最近有幸參與一個(gè)前端質(zhì)量監(jiān)控類(lèi)項(xiàng)目的重構(gòu)，算是個(gè)人初次接觸到前端質(zhì)量監(jiān)控相關(guān)的知識(shí)，對(duì)于其中的性能統(tǒng)計(jì)部分很感興趣，查詢(xún)資料之后寫(xiě)了文章，作...
摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享視頻前端技術(shù)論壇融合不可錯(cuò)過(guò)的迷你庫(kù)測(cè)試框架實(shí)例教程為你詳細(xì)解讀請(qǐng)求頭的具體含意解析的庫(kù)如果要用前端框架，開(kāi)發(fā)流程是怎樣的與有什么區(qū)別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術(shù)中 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront...
摘要：如果你的文件涉及操作，可以直接在里面添加回調(diào)函數(shù)，或者說(shuō)基本上我們的文件都可以寫(xiě)在里面進(jìn)行調(diào)用其實(shí)，這和我們將文件放在底部，在上面加以及異步加載文件的效果是一樣一樣的。 如果大家想繼續(xù)看下面的內(nèi)容的話(huà)，有一個(gè)要求，就是回答我一個(gè)問(wèn)題:你這樣寫(xiě)過(guò)代碼嗎？ window.onload = function(){ $(.gravatar).on(click,function(){ ...
閱讀 2333·2023-04-26 00:28
閱讀 3080·2019-08-30 15:55
閱讀 2752·2019-08-30 12:47
閱讀 1562·2019-08-29 11:04
閱讀 3190·2019-08-28 18:14
閱讀 954·2019-08-28 18:11
閱讀 1682·2019-08-26 18:36
閱讀 3397·2019-08-23 18:21
