一個(gè)頁(yè)面上有大量圖片資源的網(wǎng)站拆座，有哪些方法能優(yōu)化加載速度慢的問(wèn)題主巍？
根據(jù)不同的業(yè)務(wù)場(chǎng)景及條件資源等因素，從前端挪凑、后端孕索、內(nèi)容輸出端有不同選擇。
圖片格式優(yōu)化類
(1)webP了解一下
優(yōu)點(diǎn)：圖片文件體積絮锾肌搞旭；
缺陷：用戶端支持性差，兼容受場(chǎng)景限制菇绵。
具體應(yīng)用：在APP內(nèi)部允許進(jìn)行兼容處理肄渗；前端或服務(wù)器端用js作判斷進(jìn)行響應(yīng)式加載。
(2)jpeg了解一下
優(yōu)點(diǎn)：相對(duì)jpg和png在體積上有微弱優(yōu)勢(shì)咬最，壓縮方式能實(shí)現(xiàn)從模糊到清晰的加載翎嫡。
前端加載方式優(yōu)化類
(3)懶加載
插件〉ぞ鳎或原生js寫滾動(dòng)條事件钝的，判斷圖片位置與瀏覽器頂端距離與頁(yè)面距離。
(4)預(yù)加載
提前加載：相冊(cè)類推薦有序預(yù)加載铆遭。
參考：實(shí)現(xiàn)圖片預(yù)加載的幾種方式
(5)用原生js實(shí)現(xiàn)縮略圖-替換
(6)base64
CSS圖片處理技術(shù)
(7)CSS精靈圖
略硝桩。
(8)svgsprite
(9)iconfont字體圖標(biāo)
略。
后端/服務(wù)端壓縮
(10)服務(wù)器端壓縮
條件：圖片顯示區(qū)域較小枚荣。
處理方式：服務(wù)器端將圖片壓縮到顯示區(qū)域大小后傳輸碗脊。
2018.4.18
