前端性能優化《一》——Chrome Performance 頁面性能調試

前言

前端性能，這是一個很大也頗有趣的一塊，是每一個前端工程師不可避免的問題，因此這個系列會慢慢地探討一些關於性能方面的問題。最近也接觸到一些性能方面的調試以及優化的工做，紙上得來終覺淺，絕知此事要躬行。

居然是性能優化，首先第一步就應該是性能調試，發現咱們頁面性能的問題，這篇文章屬於入門級別的，話很少說，進入正題

認識 Chrome Performance

performance 的前世就是以前的 timeline（好吧，我錯過了這個時代） 若是你真的找不到的話，能夠檢查下瀏覽器的版本，說不定是版本的問題，個人是最新的，因此確定沒有問題

在 Chrome 中，咱們打開 Chrome 調試面板，進入 performance 界面。以下所示，按照步驟來

解釋下： 第二步：screenshots 是對你的屏幕進行截圖，後面會生成相關的比較直觀的截圖 第四步：模擬 CPU 速度，更加方便你重現問題，若是 4x slowdown 不行，你能夠選擇 6x slowdown

咱們能夠看到左上側的位置有幾個重要按鈕，其做用以下：

咱們點擊從新錄製，就會出現：

完成以後就會出現如下的界面，這裏都是咱們應該重點關注的內容

先來看看有哪些部分：

• 第一部分： controls，上面已介紹
• 第二部分：重要參數，這一部分咱們稱之爲 Overview 窗格，咱們能夠看到 FPS，CPU，NET在頁面加載時候的變化。
  1. FPS：每秒幀數，綠色豎線越高， FPS 越高，咱們應該關注紅色部分，這說明咱們的頁面極可能出現卡頓現象，另外 60 是一個比較理想的值
  2. CPU: CPU 資源
  3. NET: 每條彩色橫杆表明一種資源，橫杆越長，檢索資源所須要的事件越長
• 第三部分：火焰圖

1. 橫軸表示加載的時間
2. 縱軸表示事件（線程）的執行順序，先是上面的執行再到下面的，咱們要特別注意紅色的三角行部分

• 第四部分：Summary 部分，能夠看到 CPU 中中的資源分配，好比下圖中的 Rendering（渲染）佔比就很大

使用小提示：第2、3、四部分都是聯動的，好比你選擇火焰圖中的某個部分，下面的 Summary 就會顯示這個部分的總結

使用 Performance 定位性能問題

上面簡單介紹了一下 Performance，在咱們獲得數據以後，怎麼分析？

具體的步驟以下：

點擊一下具體的執行代碼，咱們就能夠看到相關的問題代碼了

結束語

上面咱們只是介紹了怎麼定位性能問題，接下來怎麼優化，這是一個很大的問題，接下來會慢慢的在這個系列中總結概括！

歡迎你們關注本公衆號