❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2025. All rights reserved.
使用 Newsticker 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。
關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path
使用 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