那些不須要你知道的Chrome DevTool-性能優化篇

首先，本文並不會講述全部的性能優化的瓶頸如何分析並提供解決方案，只能大體講述查看性能的思路，絕大多數的分析數據都是來自Aduits Panel、 Performance Panel 以及 Memory Panel。

核心目的就是如何提高 JavaScript 執行速度，固然你能夠查看官網學會較好落地的解決方案。

若已經點擊完了上述的解決方案，大體核心步驟已經完善了，爲了避免浪費你的時間，仍是不建議你繼續閱讀下文了。

問題是什麼？

項目維護到了必定階段，忽然有用戶反饋給開發，你的系統使用期間這麼卡呢？其實絕大多數，咱們並不清楚用戶描述的卡頓究竟是什麼意思？是系統加載速度慢呢？仍是用戶體驗上就是缺乏沒有讓用戶感知網站在運行的提示呢？仍是因爲網絡問題，致使系統頁面請求刷新一直在loading，而超時竟然還設置超高？

若是公司有前端監控系統，仍是蠻方即可以查看部分指標（如首屏加載時間）幫助咱們定位對應的問題點。絕大多數的公司可能只會有若干前端，因此想要有這麼一整套完善的監控體系仍是比較困難的，每每不少時候就須要前端自求多福咯。

核心問題是：咱們可否經過現有瀏覽器工具幫助咱們查看站點的性能？

如何解決問題？

前提

首先確保你的環境是乾淨的，最好和真正使用的用戶是「一致」的環境，而後打開一個無痕頁面，輸入你的站點地址，順帶打開開發者工具。以上步驟的核心邏輯是，減小後續採集數據期間沒必要要的干擾項。

尋求切入點

而後咱們就找「人」請求，給點建議咯。畢竟這麼大的站點，須要從那個維度切入如今咱們並無半點思路。而後咱們找到了Aduits Panel，選中想要審查的性能評估點，進行跑分。不用多久，就會有關於各個指標的數據報告出來，並且各項指標下方，都會有部分優化的建議，根據建議修復對應的問題，能夠幫助你提升各項指標。

性能查看思路

若站點表現出來問題僅僅是性能問題的話，能夠切換到 Performance Panel 點擊開啓記錄功能，而後刷新頁面，在關閉記錄，等待瀏覽器解析一會，就能夠呈現出記錄這段時間的總體性能狀況如何。

下述數據來源站點是，官方例子。

若是你不清楚每個內容區域中的每一個面板表明什麼，能夠查看同事寫好的筆記。

咱們能夠看到不少的紅色條狀表標記在內容區域的最上方。標記區域就是出現性能瓶頸區域，咱們根據標記定位到 Main 分區中每一個執行任務，而Main分區主要是能夠看到對應時間下主線程的調用棧，也就是火焰圖區域。能夠選擇對應的任務，詳情信息區域會展現對應的詳情數據。

咱們標記火焰圖的右上角的紅色標記，選中一個進行查看詳情數據。

詳情信息模塊，大體介紹了該任務的執行時間是不是性能瓶頸，同時會標記當前 Call Stack，幫助咱們定位具體功能源自腳本位置。

若提示爲重排重繪問題，能夠調用菜單命令喚起 Rendering Panel 勾選 「Paint flashing」，而後在頁面進行查看，若查看大量綠色方塊在閃爍，則代表存在重排重繪。此類問題產生多半是CSS樣式致使，因此須要查詢特別CSS屬性是否會觸發重排重繪，請查看csstriggers。

固然咱們會在詳情面板中看到其餘三個 tabular 窗口根據不一樣的維度去分析整個過程的數據。

若是想看選中區間的函數調用狀況，能夠查看 Call Tree tabular，這裏能夠看到觸發事件的源頭形成後續函數調用以及渲染過程的狀況。

左側會有兩個時間：Self Time & Total Time。前者表示此項子任務自身消耗多少時長，後者表示此項子任務包含後續子代消耗時長的總計。

該面板看到的數據都是根據調用棧，從上往下的查看對應調用的堆棧，而後查看函數間的調用邏輯，但若是僅僅想看哪項子任務消耗時長最多，建議使用 Bottom-Up tabular，這裏首先看到對應的底層任務，可根據時間排序，並且點開一樣能夠看到該任務的調用形式，和Call Tree調用棧有點相反的感受。

若是想要查看記錄期間任務發生的順序，能夠查看 Event Log tabular，這裏能夠看到每一個任務執行的具體順序，以及一樣任務是否重複執行的狀況。

每個Tabular中都會標明對應函數的位於腳本的位置，能夠點擊對應連接，工具會幫助你自動跳轉到 Source Panel，左側會出現每行代碼執行的時間，你能夠查看對應位置是否頻繁操做 DOM 定位或是樣式致使出現重排重繪問題。

以上都是根據官網提出來的例子，而後結合工具欄的功能進行的如何使用功能講解的，更多意義上提供了想看什麼數據的去哪裏找的解決方案。固然可能碰見的問題以及對應的解決方案，官網已經給出，感興趣能夠閱讀這裏。

固然若是想查看內存泄露等等問題，用到的就是 Memory Panel 能夠進行分析網站當下的調用堆棧，以及分析對應時間點下的新內存新增狀況，從而進行分析問題。

但官網提供的資料，查閱了兩次也不太明白講述的意思，而且術語那章節看不下去，因此在中途章節出現了術語，理解起來仍是比較模糊的，因此就沒有繼續分析如何使用 Memory Panel 去分析網站狀況，感興趣能夠閱讀這裏。固然你查閱到講述較爲清楚的文章，歡迎你能夠留言給我，不勝感激。