❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2025. All rights reserved.
使用 News Aggregator 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。
效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path
更詳細探討如何優化像素管道（Browser Rendering Pipeline）的繪製（Paint）和合成（Composite）這兩個階段。
更詳細探討如何優化像素管道（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