[2017專題] 性能優化

並不是新內容，而是搬運過去的專題。

性能測量

• Chrome 中的 Lighthouse 測量工具
• 這些指標都是什麼意思：初次渲染 FP、初次有內容的渲染 FCP、初次有意義的渲染 FMP、初次交互時延 TTFI 和初次持續交互時延 TTCI、標識視覺完成度的速度指標 Speed Index
• 使用 Paint Timing API 加強性能表現
• 幀的解剖：詳解每幀中的各個子部分

網絡優化 & 資源優化

• SSR vs CSR：比較了服務器端渲染和瀏覽器端渲染
• 更快的 DOM 加載策略：推斷式加載、異步加載、延遲加載與預加載
• 自動化圖片優化：各個不一樣圖片格式的壓縮比和適用場景
• Yelp 是如何無損壓縮圖片的：從 CDN 角度實現圖片優化的部分：偵測可壓縮 PNG 並轉化爲 JPEG、動態 JPEG 質量控制、更改 JPEG 編碼器
• Webfont 優化策略

渲染優化

• 關鍵渲染路徑
• 無線性能優化：粘合過程

清單

• 前端資源優化清單：大綱式清單，相對較全
• AMP 優化，爲什麼 AMP 如此快：AMP 的優化清單
• 網絡現狀：性能提高指南：主要部分爲資源優化的清單
• 移動端體驗優化手冊：從用戶感知角度入手的優化清單