前端性能優化學習筆記二
圖片的區別
jpg：有損壓縮，壓縮率高，不支持透明
png：支持透明，瀏覽器兼容好
- png8 —— 256色 + 支持透明
- png24 —— 2^24色 + 不支持透明
- png32 —— 2^24色 + 支持透明
webp：壓縮程度更好，在ios webview有兼容性問題
svg：矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景
CSS雪碧圖
把一個頁面中用到的圖標整合到一張單獨的圖片中以達到減少網站的request請求
Image inline
將更小的圖片轉換爲base64內嵌到html當中
矢量圖iconfont
使用iconfont中的圖標
圖標解決方案
對於一個項目，我們會選擇一個iconfont圖標庫全局使用，而某些圖標是矢量圖無法實現的，這時候我們根據情況使用base64或者雪碧圖的解決方案