程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章334
- 標籤474
標籤查看更多
分類查看更多
- Advanced Web Dev Quiz (27)
- Deep JavaScript Foundations v3 (69)
- Full Stack Fundamentals (47)
- JavaScript Hard Parts v3 (50)
- JS地下城 (5)
- Testing Fundamentals (27)
- TypeScript Fundamentals (28)
- Web Performance Fundamentals (41)
- You Might Not Need a Framework (32)
- 學習經歷 (2)
- 生活亂談 (2)
- 程式筆記 (4)
最新文章
混合 Dev 和 Life 的所有最新內容
334 篇2026-07-239 分鐘閱讀
介紹瀏覽器內建的 Performance API，說明 performance.now()、performance.timeOrigin、performance.getEntries() 的用途與差異，作為自訂效能收集的基礎工具。
2026-07-228 分鐘閱讀
介紹 FCP（首次內容繪製）的定義與在效能時間軸上的位置，說明它與 TTFB、LCP 之間的連動關係，以及 Google 的 1.8 秒建議標準。
2026-07-229 分鐘閱讀
介紹 TTFB（首位元組時間）的量測範圍與影響因素，說明轉址、DNS 查詢、伺服器回應速度如何決定這個數字，以及它與 LCP 的直接關聯。
2026-07-217 分鐘閱讀
回顧 2024 年退役的 Core Web Vitals 第三指標 FID（首次輸入延遲），說明其設計目的、量測邏輯，以及被 INP 取代的原因。
2026-07-2111 分鐘閱讀
介紹 Core Web Vitals 第三個指標 INP（互動到下一幀繪製）的量測範圍、互動定義、分數決定方式，以及裝置效能對結果的影響。
2026-07-2011 分鐘閱讀
介紹火焰圖的結構與色彩代碼，說明瀏覽器主執行緒的運作方式，作為理解 INP 指標的基礎工具。
2026-07-2011 分鐘閱讀
補充說明 CLS 計算的邊界情況，包含哪些元素計入影響範圍、viewport 與捲動的關係、75th percentile 的收集方式，以及 Canvas、Skeleton、iframe 的處理邏輯。
2026-07-1910 分鐘閱讀
說明 CLS（累積版面位移）的計算方式，包含影響比例與距離比例的乘積公式、桌面版與行動版的差異，以及 Google 的評分門檻與豁免規則。
2026-07-1912 分鐘閱讀
介紹 Google Core Web Vitals 的三項指標概覽，並深入說明 LCP（最大內容繪製）的計算方式、entropy 門檻、動態候選邏輯與 Google 評分標準。
Web Performance Fundamentals
#frontendMasters #webPerformanceFundamentals #CoreWebVitals #LCP #ImageOptimization 2026-07-189 分鐘閱讀
說明 DOMContentLoaded 與 load 事件在客戶端渲染架構下為何失去意義，以及這個問題如何促使 Google 建立以使用者感知為基準的 Core Web Vitals。
Web Performance Fundamentals
#frontendMasters #webPerformanceFundamentals #CoreWebVitals #DOMContentLoaded MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog