用 Performance API 檢測檔案讀取時間

用 Performance API 檢測檔案讀取時間

本篇同步發表至：Let’s Write - 用 Performance API 檢測檔案讀取時間

上次遇到官網的讀取時間很耗了很久，但從 Network 也沒看出是哪一支檔案造成的情形。

當時一位後端就在問說前端有沒有辦法用 JS 看頁面的效能狀況？

今天原本是在查別的資料，一個巧合就看到側邊的推薦文章寫了一個 Performance API，在 Google 大神的指引下，找到了這篇：Performance API

「performance對象的timing屬性指向一個對象，它包含了各種與瀏覽器性能有關的時間數據，提供瀏覽器處理網頁各個階段的耗時。」

不過想到之前後端提的問題，對 performance.getEntries() 是比較感興趣的。

稍微試了一下，還真的把所有 CSS、JS、Image 的各階段時間給標了出來。

為了方便以後可以隨時在各個專案中來檢測，就寫了一支 JS，之後當作 CDN 直接引用就可以了：

https://letswritetw.github.io/performance-console/performance-console.js

GitHub上原始檔的連結如下：letswrite-performance-console

使用步驟如下：

1. 引用上面的 JS 檔
2. 引用完後在頁面上用開發人員模式來看，就可以在 Console 上看到資訊了，如下圖（Demo 是這頁）：

file_name 是頁面中請求的檔案，need_time 是耗費的時間，單位是毫秒，按照讀取時間倒序排列。

JS 是用 ES6 寫的，為了讓大家可以看到原始寫法，就不做壓縮編譯，因此 IE 會看不到，建議用 Chrome 來看。