❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2026. All rights reserved.
更詳細探討如何優化像素管道（Browser Rendering Pipeline）的樣式計算（Recalculate Styles）和版面配置（Recaculate Layout / Reflow）這兩個階段。
Layout Thrashing Forced Synchronous Layout 關鍵轉譯路徑 效能調校 轉譯效能
避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。
requestAnimationFrame 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance
JavaScript 通常在作業系統的 Main Thread 執行，但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread，兩條線互不影響，讓 JavaScript 在背景執行，並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers，好處是不阻塞 Main Thread 而讓速度變快。
Web Workers 效能調校 轉譯效能 Rendering Performance Chrome DevTools
如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯？
Chrome DevTools
以更高階的角度來看如何優化效能-App 的生命週期，讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。
RAIL 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance
現今裝置更新畫面的頻率是每秒 60 幀（60Hz 或稱 60fps），意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面，還有很多事情要忙，因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面，就會產生顫動（Juddering）。想提高更新畫面的頻率、避免顫動，就要了解瀏覽器如何渲染畫面。
關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance
動畫效能優化筆記。這裡提供三個方向：使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。
requestAnimationFrame will-change 關鍵轉譯路徑 效能調校 轉譯效能