程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章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
前端技術、踩坑紀錄與學習筆記
332 篇2026-07-276 分鐘閱讀
從使用者心理學的角度探討「夠快」的定義，介紹 1960 年代等待心理學研究的五個發現，以及 TurboTax 刻意減速的案例說明。
2026-07-2711 分鐘閱讀
介紹 Real User Monitoring（RUM）的概念與工具分類，說明它與 CrUX 的差異，以及 RUM 資料在篩選、個別請求鑽取與自訂指標追蹤上的實際應用。
Web Performance Fundamentals
#frontendMasters #webPerformanceFundamentals #RealUserMonitoring #CoreWebVitals 2026-07-267 分鐘閱讀
介紹 Google Web Vitals Chrome 擴充功能的安裝與使用方式，說明如何即時查看 Core Web Vitals 分數與 LCP 元素細節，以及同時呈現 lab data 與 field data 的功能。
2026-07-269 分鐘閱讀
介紹 Chrome Performance 面板的操作方式，說明如何使用瀑布圖與火焰圖定位載入瓶頸，以及 render blocking 資源與資源請求阻塞的識別方法。
Web Performance Fundamentals
#frontendMasters #webPerformanceFundamentals #DevTools #WaterfallChart #FlameChart 2026-07-2510 分鐘閱讀
介紹如何使用 Chrome Lighthouse 進行效能測試，包含響應式模式、網路節流與 CPU 節流的設定，以及如何讓測試結果更接近真實使用者的體驗。
2026-07-2510 分鐘閱讀
說明為何平均值不適合用於效能分析，介紹百分位數的概念與 p75、p95 的意義，並釐清 lab data 與 field data 各自的適用情境。
2026-07-249 分鐘閱讀
介紹三種收集效能資料的方式，說明各自的準確度差異，以及為何 field data 才能真實反映使用者體驗。
2026-07-249 分鐘閱讀
說明 LCP、CLS、INP 等 Core Web Vitals 在 Blink、WebKit、Gecko 三大引擎的支援差異，以及 Safari 資料盲區對效能監控的實際影響。
Web Performance Fundamentals
#frontendMasters #webPerformanceFundamentals #CoreWebVitals #BrowserCompatibility 2026-07-2311 分鐘閱讀
說明 PerformanceObserver 的設計原理與基本用法，介紹 buffered 屬性的重要性，以及 Google 的 web-vitals 套件如何簡化 Core Web Vitals 的收集流程。
2026-07-239 分鐘閱讀
介紹瀏覽器內建的 Performance API，說明 performance.now()、performance.timeOrigin、performance.getEntries() 的用途與差異，作為自訂效能收集的基礎工具。
MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog