Base64 Images

將圖片轉為編碼字串,讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼,以減少 HTTP Request。適合較少更新的小圖,例如 icon 等。

Base64 Images 效能調校 加載效能 Loading Performance 圖片最佳化


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

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

關鍵轉譯路徑 效能調校 轉譯效能 Critical Rendering Path Rendering Performance


改進渲染效能範例 2 - Newsticker

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

關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path


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

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

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path


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

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

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path


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

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

Layout Thrashing Forced Synchronous Layout 關鍵轉譯路徑 效能調校 轉譯效能


從 JavaScript 著手優化渲染效能

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

requestAnimationFrame 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance