用 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 是這頁)
用 Performance API 檢測檔案讀取時間
用 Performance API 檢測檔案讀取時間

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

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


Summary
用 Performance API 檢測檔案讀取時間
Article Name
用 Performance API 檢測檔案讀取時間
Description
上次遇到官網的讀取時間很耗了很久,但從 Network 也沒看出是哪一支檔案造成的情形。當時一位後端就在問說前端有沒有辦法用 JS 看頁面的效能狀況?今天原本是在查別的資料,一個巧合就看到側邊的推薦文章寫了一個 Performance API,在 Google 大神的指引下,找到了這篇:Performance API
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

Vue

用 VuePress 製作說明文件頁面 – 1:安裝

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

WordPress

如何用 MAMP 在本機安裝 WordPress

Forms Google

Google 表單 用網址改變題目預設值

Front-End

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層

WordPress

搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.