Chrome DevTools

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

Sentry Cypress Web Vitals Memori Loading Performance Rendering Performance Core Web Vitals 效能監控 Real User Monitoring GitHub Actions CI/CD Chrome DevTools End-to-End Testing Google Analytics Lighthouse Synthetic Monitoring active monitoring cypress.io passive monitoring 加載效能 效能調校 端對端測試 自動化測試 轉譯效能 sharing WebConf Taiwan 前端效能 系列文 · 留言


Ch6 整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試 | 可測試的 JavaScript (Testable JavaScript)

本文為「可測試的 JavaScript (Testable JavaScript)」第 6 章「整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試」的閱讀筆記。

可測試的 JavaScript Testable JavaScript javascript 單元測試 自動化測試 整合測試 Cypress Lighthouse Unit Test Integration Test Chrome DevTools End-to-End Testing cypress.io 端對端測試 閱讀筆記 讀書會 · 留言


瀏覽器渲染效能(Browser Rendering Performance)總整理 (ゝ∀・)

瀏覽器渲染效能(Browser Rendering Performance)總整理 (ゝ∀・)

關鍵轉譯路徑 效能調校 轉譯效能 Critical Rendering Path Rendering Performance Chrome DevTools Web Workers RAIL css3 animations 前端效能 系列文 · 留言


改進渲染效能範例 2 - Newsticker

使用 Newsticker 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。

關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言


改進渲染效能範例 1 - News Aggregator

使用 News Aggregator 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Forced Synchronous Layout Layout Thrashing Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言


如何優化像素管道的 Paint 和 Composite?

更詳細探討如何優化像素管道(Browser Rendering Pipeline)的繪製(Paint)和合成(Composite)這兩個階段。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Chrome DevTools will-change css css3 animations 前端效能 系列文 · 留言


如何優化像素管道的 Styles 和 Layout?

更詳細探討如何優化像素管道(Browser Rendering Pipeline)的樣式計算(Recalculate Styles)和版面配置(Recaculate Layout / Reflow)這兩個階段。

Layout Thrashing Forced Synchronous Layout 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path BEM Chrome DevTools css css3 animations 前端效能 系列文 · 留言


從 JavaScript 著手優化渲染效能

避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。

requestAnimationFrame 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools javascript css3 animations css 前端效能 系列文 · 留言


Web Workers

JavaScript 通常在作業系統的 Main Thread 執行,但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread,兩條線互不影響,讓 JavaScript 在背景執行,並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers,好處是不阻塞 Main Thread 而讓速度變快。

Web Workers 效能調校 轉譯效能 Rendering Performance Chrome DevTools javascript Worker 前端效能 系列文 · 留言


如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯?

如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯?

Chrome DevTools · 留言


關鍵轉譯路徑 Critical Rendering Path

現今裝置更新畫面的頻率是每秒 60 幀(60Hz 或稱 60fps),意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面,還有很多事情要忙,因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面,就會產生顫動(Juddering)。想提高更新畫面的頻率、避免顫動,就要了解瀏覽器如何渲染畫面。

關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance Chrome DevTools Layout Thrashing Forced Synchronous Layout css3 animations css will-change flexbox BEM 前端效能 系列文 · 留言


CSS3 Animation

使用 CSS3 Transition 和 Animation 製作動畫、效能優化。

css3 animations will-change Critical Rendering Path 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Chrome DevTools css · 留言


Service Worker

Service Worker 的瀏覽器支援度檢查、註冊(Register)、下載(Download)、安裝(Install)、啟動(Active)、閒置(Idle)、發生錯誤(Error)、存取(Fetch)、收發訊息(Message)和結束(Terminated)。

Service Worker PWA Worker javascript Chrome DevTools · 留言