1. 背景

當頁面出現性能問題，如加載慢、頁面卡頓等現象時，大多是用戶主觀上的感受。而要真正客觀的去評測性能和定位問題原因，通常需要專業的前端同學通過 DevTools 中的 Performance 等工具來查看（如圖 1 所示），這無疑增加了客觀看問題的成本。

圖 1

當然，目前也是有一些不錯的工具來評測分析頁面，但這些工具都存在一些問題。下面主要說一下 PageSpeed Insights、Lighthouse 。

1.1. PageSpeed Insights（Lighthouse）

PageSpeed Insights 和 Lighthouse 兩個比較類似，就一起講了。
這兩個工具是比較強大的，對頁面的分析也比較到位，但存在以下問題：

• 被動型。需要用戶去主動執行工具才能看到分析結果。
• 無法保留現場。使用工具都需要重載頁面才能對頁面進行評測，所以當頁面有一些偶發性的問題時，現場丟失，增加排錯成本。
• 工具都是 online 版本的。內網產品無法進行評測。
• 插件版需要在 Devtools 中使用。增加使用成本。

所以能不能有一個工具，可以主動性的去獲取頁面信息，并用幾乎為 0 的成本，可以讓用戶看到客觀的頁面性能指標及完備的現場數據，可以用來追溯問題及提供解決方案。

2. 解決問題

經過討論，分了 5 個維度來判斷頁面的性能，如下：

• 頁面加載時間：暫時定位為 load 的時間。
• 加載資源數量：在 load 過程中加載的所有資源信息。
• 大資源數量：超過 1MB 的資源。
• 慢資源數量：超過 500ms 的資源。
• 平均幀率：加載過程中的幀率。

通過這幾個指標，大致可以說明頁面的性能和問題出現的原因。

3. 實現

目前先使用 Chrome 插件的方式進行了實現，使用 Chrome 插件主要有如下優勢：

• ContentScript 內容注入。可以在不改造網站的情況下，對分析腳本進行注入。也可實現一些動態通知等效果。
• Action Badge醒目提醒。可以通過將性能指標寫在 Badge 中實現醒目的提醒效果。
• Popup 詳細信息。可以將詳細的分析報告放在 Popup 中，方便用戶查看詳情。
• Option 指標配置。可以將需要的指標及指標的閾值進行自定義配置。
• 代碼復用性。插件中的采集、分析代碼完全可以被復用。

3.1. 實現流程

實現流程主要為：收集數據 ? 分析數據 ? 生成報告。插件流程如下圖 2 所示：

圖 2

4. 插件

PageStatus
應用商店：插件地址

頁面加載完成后，插件會自動將頁面的加載時間顯示在瀏覽器的工具條中，背景色根據加載時間的快慢 使用“紅”“黃”“綠”來標注，實時反映頁面健康狀況，如圖 3 所示：

圖 3

4.1. 功能

下面對詳細的功能進行介紹。

4.1.1. 頁面加載時間

頁面加載時間 表示的是頁面觸發 load 的時間，會同步到瀏覽器的工具條中，點擊插件圖標會顯示更詳細的頁面加載信息，如圖 4 所示：

圖 4

4.1.2. 加載資源數量

頁面加載過程中，所有資源的請求都會在這一項中體現出來。這里會按照請求的時間次序進行排列，超過 1S 的資源進行加紅標注，直接從緩存讀取的會用淺顏色和刪除線標注，如圖 5 所示：

圖 5

4.1.3. 大資源數量

頁面加載過程中，默認超過 1MB 的資源會被定義為大資源。如圖 6 所示：

圖 6

4.1.4. 慢資源數量

頁面加載過程中，默認超過 500ms 的資源會被定義為慢資源。如圖 7 所示：

圖 7

4.1.5. 平均幀率

會計算頁面加載過過程中的平均幀率，如圖 8 所示：

圖 8

4.1.6. 頁面消息通知

默認開啟，對超標的項目進行頁面內通知的功能，如圖 9 所示：

圖 9

4.1.7. 配置

插件中所有參數都是可以進行配置的，可以點擊擴展圖標右下角的小齒輪按鈕進入配置頁面，也可以在擴展圖標右鍵選擇選項進入，如圖 10 所示：

圖 10

---

Github Repo

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的主动型页面性能利器：Page Status的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。