靜態資源優化

圖片

jpg, png, gif, webp 應用場景

  • jpg: 顏色豐富照片、banner 圖、結構不規則圖形
  • png: 純色、透明、線條、圖標、邊緣清晰
  • gif: 動圖、圖標
  • webp: 圖形、半透明圖

響應式圖片(srcset)

<img srcset="img-320w.jpg,img-640w.jpg 2x, img-960w.jpg 3x" />

逐步載入

  • LQIP(low quality image placeholder)、SQIP(SVG quality image placeholder)

Server Side 自動圖片優化(尺寸、格式、壓縮)

文件

HTML

  • 減少 Nested HTML
  • 減少 DOM

CSS

  • 放置 header 頭部
  • 減少 expensive 屬性（偽類：nth-child，定位：position: fixed）
  • 減少樣式層級（div ul li span i { color: red; }）
  • 避免使用內存佔用過多的屬性（text-indent: -99999px）
  • 避免使用耗電量大的屬性（CSS 3D Transform, CSS3 Transition, Opacity）
  • 盡量避免使用 CSS expression
    • background-color: expression((new Date()).getHours()%2 ? "#FFF" : "#000" )
  • 盡量避免使用通配 selector（ul > li）
  • 盡量避免類正則的 selector（*= |= ^= $=）
  • 使用 external CSS，減少 @import
  • 字體部署在 CDN 上，或用 base64 保存在 CSS 中，透過 localStorage 進行 cache
  • 盡量避免 CSS 同時動畫、延遲動畫初始化、結合 SVG

JS

  • 當需要時再優化
  • 考慮可維護性（考慮整個團隊）
  • 放 body 尾部避免阻塞渲染
  • 盡量使用 id selector
  • 避免使用 eval
  • 使用事件節流、委託
  • 避免大量 JS 動畫
  • 盡量使用 CSS3, Canvas 動畫
  • 合理使用 requestAnimationFrame 取代 setTimeout, setInterval
  • cache DOM
  • cache AJAX

Cache

  • Cookie: 會話管理
  • sessionStorage: 頁面應用間傳值
  • localStorage: 緩存靜態文件CSS/JS、緩存不常變更的 API data、儲存地理位置資訊、
  • indexedDB: 客戶端大量結構化資料儲存、離線使用、少修改常訪問

避免重繪

  • 避免使用 Table、Float 佈局
  • 圖片盡量設置 width, height
  • 使用 viewport 限制螢幕縮放級別
  • 避免頻繁操作 DOM, style 屬性（一次性操作較好，現代框架 diff 算法主要就在做這件事）
  • 使用 fragment，避免在 DOM tree 直接操作

打包優化

  • 定位大體積 module（安裝分析套件）
  • 刪除沒用到的依賴
  • production 依賴與 dev 環境分離
  • 避免使用造成 tree shaking 失敗的語法（export default）
Last Updated:
Contributors: johnnywang