用 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上原始檔的連結如下:auguston/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

隨選筆記文

Front-End

滿版圖片背景、影音背景

Analytics Google

GA:User-ID 功能 設定及報表檢視

Vue

用 VuePress 製作說明文件頁面 – 2:config.js 基本設定

Front-End

Netlify + GitLab 建一個免費靜態網站

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

Front-End

IntersectionObserver:上篇-基本介紹及使用

PWA

PWA學習筆記-6:實際使用整體流程範例

Front-End

用原生 JS 做一個簡單的抽獎功能頁面

Google Others

用 reCAPTCHA v3 來做非機器人驗證

Google Sheets

如何用 Google Excel 當作資料庫

本站準備替換留言功能,投票調查中,歡迎 參與投票

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

Let's Write

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