常見圖片格式

詳見：聊一聊幾種常用web圖片格式：gif、jpg、png、webp

圖片應用場景

普通展示圖片、圖標等

示例

代碼：https://github.com/js-fu/js-fu.github.io/tree/master/fe-img

1.html 普通靜態頁面

https://js-fu.github.io/fe-img/1.html

首先看到這是一個的普通靜態頁面，一個圖文列表。在Disable cache和Slow 3G的環境下打開該頁面，得到如下performance。

1.jpg

DOMContentLoaded 和 load 事件
DOMContentLoaded: 當純 HTML 被完全加載以及解析時，DOMContentLoaded 事件會被觸發，而不必等待樣式表，圖片或者子框架完成加載。 $(function() {})
load: 當整個頁面及所有依賴資源如樣式表和圖片都已完成加載時，將觸發load事件。它與 DOMContentLoaded 不同，后者只要頁面 DOM 加載完成就觸發，無需等待依賴資源的加載。

優化

2.html 使用ajax獲取圖文列表數據

https://js-fu.github.io/fe-img/2.html

這個頁面的標題“圖文列表”，是固定的。圖文資源模擬用ajax獲取。同樣在Disable cache和Slow 3G的環境下打開該頁面，得到如下performance。

2.jpg

分析上圖，可看出DOMContentLoaded事件在2.38秒執行，跟1.html差不多。load事件提前到了2.39秒，因為加載圖片資源是異步去加載的。但是仍有一個問題，不在可視范圍內的圖片也加載了，不必要，可以等到頁面滾動，等圖片到了可視范圍內再去懶加載。

3.html 懶加載

https://js-fu.github.io/fe-img/3.html

這個頁面，在 2.html 的基礎上增加了懶加載的功能。初始渲染頁面的時候，只下載在了出現在首屏的兩張圖片。

原理：監聽滾動事件、getBoundingClientRect

object.getBoundingClientRect()

4.html 預加載

https://js-fu.github.io/fe-img/4.html

這個頁面，在 2.html 的基礎上增加了預加載的功能。首屏顯示loading蒙層和加載資源的進度條，等到加載完，展示實際頁面，看圖文列表里的圖片都是預加載過的資源，瀏覽流暢很多。

5.html 雪碧圖

https://js-fu.github.io/fe-img/5/5.html

對于一些小圖片，比如圖標等，可以采用雪碧圖的方案，講多個小圖片合成一個圖片，減少網絡請求。

雪碧圖

6.html iconfont

https://js-fu.github.io/fe-img/6.html

對于圖標等，也可以采用字體圖標iconfont代替圖片，圖標可以像字體一樣修改大小、顏色等樣式。

7.html base64

https://js-fu.github.io/fe-img/7/7.html

對于一些尺寸非常小的圖片，可以使用base64的方案，將圖片的base64編碼寫入html、css中。可以減少網絡請求。

webpack配置中可以用url-loader，設置一個界限值，小于界限值的時候，會自動把小圖片轉成base64

8 骨架屏

9 檢測設備網絡狀況，使用OSS服務，采用不同質量的圖片，是圖片大小和圖片質量達到一個平衡

網絡狀況 MDN NetworkInformation

阿里云OSS ，可以實現圖片質量變換、模糊、旋轉、裁剪等操作。

其它

cdn、gzip等