性能優(yōu)化知識點大全

性能優(yōu)化

查詢緩存 -> 發(fā)送請求 -> 等待響應 -> 頁面解析 -> 下載并處理各類靜態(tài)資源 -> 運行時 -> 預加載

一、緩存

  • 本地數(shù)據(jù)存儲
    localStorage、sessionStorage、indexedDB
  • 內(nèi)存緩存
  • Cache API
  • http緩存
  • Push Cache： HTTP/2 的 Push 功能所帶來的

二、發(fā)送請求

  • 避免多余重定向
  • DNS 預解析
  • 預先建立連接
  • 使用 CDN
    DNS 解析會將 CDN 資源的域名解析到 CDN

服務的負載均衡器上，負載均衡器可以通過請求的信息獲取用戶對應的地理區(qū)域，從而通過負載均衡算法，在背后的諸多服務器中，綜合選擇一臺地理位置近、負載低的機器來提供服務。例如為北京聯(lián)通用戶解析北京的服務器 IP。這樣，用戶在之后訪問 CDN 資源時都是訪問北京服務器，距離近，速度快。

三、服務端響應

四、頁面解析與處理

  1. 注意資源在頁面文檔中的位置
  2. 使用 defer 和 async
  3. 頁面文檔壓縮

五、頁面靜態(tài)資源

1.思路

  • 減少不必要的請求
  • 減少包體大小
    • 使用適合當前資源的壓縮技術；
    • 避免再響應包體里“塞入”一些不需要的內(nèi)容
  • 降低應用資源時的消耗
  • 利用緩存

2.針對各類資源的性能優(yōu)化

2.1 JavaScript 優(yōu)化
  • 減少不必要的請求
    • 代碼拆分（code split）與按需加載(webpack、路由、 AMD 模塊加載器)
    • 代碼合并
  • 減少包體積大小
    • 代碼壓縮
    • Tree Shaking：本質(zhì)是通過檢測源碼中不會被使用到的部分，將其刪除，從而減小代碼的體積
    • 優(yōu)化 polyfill 的使用
    • 優(yōu)化 polyfill 的使用
  • 解析與執(zhí)行
    • JavaScript 的解析耗時
    • 避免 Long Task
    • 是否真的需要框架
    • 針對代碼的優(yōu)化
  • 緩存

    webpack 會使用自增 ID。這就可能導致一個問題：一些模塊雖然它們的代碼沒有變化，但由于增/刪了新的其他模塊，導致后續(xù)所有的模塊 ID 都變更了，文件 MD5 也就變化了。另一個問題在于，webpack 的入口文件除了包含它的 runtime、業(yè)務模塊代碼，同時還有一個用于異步加載的小型 manifest，任何一個模塊的變化，最后必然會傳導到入口文件。這些都會使得網(wǎng)站發(fā)布后，沒有改動源碼的資源也會緩存失效

   1.使用 Hash 來替代自增 ID: HashedModuleIdsPlugin 插件
   2.將 runtime chunk 單獨拆分出來
   3.使用 records
2.2 CSS 優(yōu)化
  • 關鍵 CSS:經(jīng)典的骨架屏
  • 優(yōu)化資源請求
    • 按需加載
    • 合并文件
    • 請求的優(yōu)先級排序
    • 慎用 @import: 這個是串行，可以改成并行
    • 謹慎對待 JavaScript 腳本的位置
  • 減少包體大小
    • 壓縮
    • 選擇合適的兼容性
  • 解析與渲染樹構建
    • 簡化選擇器
    • 避免使用昂貴的屬性
    • 使用先進的布局方式
  • 利用緩存
2.3 圖片
  • 優(yōu)化請求數(shù)
    • 雪碧圖
    • 懶加載
    • CSS 中的圖片懶加載
    • 內(nèi)聯(lián) base64
  • 減小圖片大小
    • 使用合適的圖片格式
      • 使用 WebP：
      • 使用 SVG 應對矢量圖場景
      • 使用 video 替代 GIF
      • 漸進式 JPEG：
    • 圖片質(zhì)量的權衡：有損 無損
    • 使用合適的大小和分辨率
    • 刪除冗余的圖片信息
    • SVG 壓縮
  • 緩存
2.4 字體
  • font-display

@font-face 中設置 font-display: swap，他可以讓 FOIT 的默認行為變?yōu)?FOUT (Flash of Unstyled Text)，即先會使用默認字體樣式展示文本，字體加載完畢后再將文本的字體樣式進行替換。

  • 內(nèi)聯(lián)字體
  • 使用 CSS Font Loading API
  • FOFT

2.5 視頻優(yōu)化

  • 使用合適的視頻格式
  • 視頻壓縮
  • 移除不必要的音軌信息
  • 使用“流”
  • 移除不必要的視頻

六、運行時

1.注意強制同步布局

  • 嘗試使用 RAF 避免強制同步布局
  • 批量化你的操作

2.長列表優(yōu)化

  • 實現(xiàn) Virtual List
  • 原生的 Virtual Scroller

3.避免 JavaScript 運行時間過長

  • 任務分解
  • 延遲執(zhí)行
  • 并行計算

4.善用 Composite：https://fed.taobao.org/blog/2016/04/26/performance-composite/

5.滾動事件的性能優(yōu)化：防抖，節(jié)流

6.Passive event listeners ？

七、預加載

1.預加載技術

  • Resource Hints
    • Prefetch
    • Prerender
    • Preload
    • webpack 中的使用方式
  • 基于 JavaScript 的預加載

2.視頻預加載

  • 為視頻添加 preload 屬性
  • 使用 Preload Link
  • 使用 JavaScript 進行自定義的 Buffer 操作

3.預加載的策略

  • quicklink
  • Guess.js
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容