本文將記錄我所掌握的全部整套前端性能優化模型

http協議層面

• http協議緩存（應用緩存，瀏覽器默認緩存，自定義瀏覽器緩存，代理服務器緩存，服務器緩存）
• gzip壓縮
• chrome併發6個請求
• 使用loading優化請求中的體驗
• 預加載 PreloadJS （瀏覽器緩存）

工程化

• 圖片base64
• 代碼切割
• 按需加載 BundleAnalyzerPlugin
• 靜態分離，第三方庫，cdn緩存 externals分離 htmlWebpackPlugin插入
• 代碼壓縮
• 快速打包 多內核打包 cpu核

編碼

• html

  • 減少標籤使用數量
  • 正確合理嵌套且語義化

• css

  • 加載優化

    • 前置加載
    • 不適用@import，使用link
    • 雪碧或者直接第三方字體庫或者轉base64減少加載數

  • 選擇器優化

    • 少使用標籤選擇器，
    • 組合選擇器不超過3層
    • 避免使用通配符
    • reset合理適量

  • 渲染優化

    • transform實現動畫性能更高，非主線程的合成動畫
    • 特定元素設置高度減少重排
    • css代替圖片

  • 代碼體積

    • 提取公共css
    • css簡寫 padding margin background border font
    • 省略0的單位
    • 使用屬性繼承

• js

  • 事件委託
  • Fragment處理dom片段
  • 防抖節流
  • 需查詢和計算的結果使用變量緩存
  • 縮短函數訪問變量的作用域鏈，變量緩存
  • for循環 > for-of > forEach > for-in（數據量大的時候考慮，不然幾十條數據真沒意義）

• vue

  • 減少data內部數據
  • Object.freeze (有可行性，待驗證)
  • 必要時候使用eventBus傳數據，減少綁定了大量監聽數據
  • 路由懶加載 + 適當合併 /* webpackChunkName: "plugins/module" */
  • for循環 + key => patch 算法
  • for的優先級更高，if可以提前到外層，另外可以考慮計算後過濾掉不渲染數據然後再去渲染
  • 他們説computed的有緩存，性能稍好
  • 虛擬列表