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

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

圖片來源：Browser Rendering – Performance past the first page load

觀念篇

• 從 Critical Rendering Path 來看渲染效能，並分別詳細探討 Styles 和 Layout 與 Paint 和 Composite。
• RAIL：從更高階的角度-App 的生命週期來看如何優化瀏覽器渲染效能。
• 從 JavaScript 著手優化渲染效能，主要是從避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management 來探討如何改善渲染效能，還有一些獨立出來探討的議題…
  • Web Workers
  • Debounce Input Handlers
• 總結以上觀念，到底有哪些方法可以解決渲染效能問題？請見如何提升動畫效能？

實戰篇

改進渲染效能範例。

• News Aggregator
• Newsticker

工具篇

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

參考資料

• Browser Rendering Optimization
• Performance