網頁性能優化01-精靈圖利弊與應用場景

網頁性能優化01-精靈圖利弊與應用場景

精靈圖：通過減少頁面網絡請求的數量，來提高網頁加載速度

1.1-精靈圖介紹

• 1.什麼是精靈圖
  • 精靈圖就是就是將幾張較小的圖片放在一張大圖上，這張大圖稱之爲精靈圖，又叫雪碧圖（CSS Sprites）
• 2.爲什麼要有精靈圖？
  • 因爲瀏覽器在渲染DOM樹的時候，會把所有的外部資源路徑(例如img標籤的src屬性作爲網絡請求，向服務器發送資源)
    • 例如淘寶網頁，一個首頁會有300多以上的請求，每一個請求都需要佔用網絡資源，無形中會降低網頁加載速度
      
• 3.精靈圖的作用
  • 將多個小圖片放入一個大圖中，可以減少頁面網絡請求的數量。從而提升網頁的加載速度。
    • 前端如何使用精靈圖：只需要使用背景圖來加載精靈圖即可，通過設置背景圖的位置可以加載不同的精靈圖。
      
      

1.2-精靈圖利弊與適用場景

• 既然只需要將多個小圖片放入大圖中，那爲什麼很多網頁不把每一個圖片都做成精靈圖呢？

1.精靈圖的利弊

• 1.好處：減少頁面網絡請求數量
• 2.弊端：維護不便。一但大圖中某一個小圖片要修改，那麼整張大圖瀏覽器需要重新加載(反而會影響性能）

2.精靈圖的適用場景

• 1.適合場景 ： 圖片固定，幾乎很少更換。
  • 例如淘寶頁面右側的話費，手機小圖標等
  • 例如攜程移動web端的導航小圖標
    
• 2.不適合場景：需要經常更換的圖片
  • 例如電商類的一些商品圖片，基本上不適合使用精靈圖
  • 例如京東移動web的小圖標，也不適合使用精靈圖