前端性能優(yōu)化-vue ssrpwa突破web頁(yè)面瓶頸-圖片相關(guān)

圖片相關(guān)的優(yōu)化徐銘杰結(jié)合facebook和淘寶移動(dòng)首頁(yè)案例分析掌握通過(guò)在線網(wǎng)站和fis3兩種實(shí)現(xiàn)圖片相關(guān)的一些優(yōu)化課程目標(biāo)理解圖片相關(guān)的優(yōu)化的核心概念有損壓縮——一張JPG圖片的解析過(guò)程png8/png24/png32之間的區(qū)別png8——256色+支持透明png24——2^24色+不支持透明png32——2^24色+支持透明

每種圖片格式都有自己的特點(diǎn)，針對(duì)不同的業(yè)務(wù)場(chǎng)景選擇不同的圖片格式很重要不同格式圖片常用的業(yè)務(wù)場(chǎng)景jpg有損壓縮，壓縮率高，不支持透明png支持透明，瀏覽器兼容好webp壓縮程度更好，在ioswebview有兼容性問(wèn)題

svg矢量圖，代碼內(nèi)嵌，相對(duì)較小，圖片樣式相對(duì)簡(jiǎn)單的場(chǎng)景不同格式圖片常用的業(yè)務(wù)場(chǎng)景jpg——大部分不需要透明圖片的業(yè)務(wù)場(chǎng)景png——大部分需要透明圖片的業(yè)務(wù)場(chǎng)景webp——安卓全部svg矢量圖——圖片樣式相對(duì)簡(jiǎn)單的業(yè)務(wù)場(chǎng)景進(jìn)行圖片壓縮針對(duì)真實(shí)圖片情況，舍棄一些相對(duì)無(wú)關(guān)緊要的色彩信息CSS雪碧圖把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量Imageinline將圖片的內(nèi)容內(nèi)嵌到html當(dāng)中減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量使用矢量圖使用SVG進(jìn)行矢量圖的繪制使用iconfont解決icon問(wèn)題在安卓下使用webpWebP的優(yōu)勢(shì)體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來(lái)更小的圖片體積，而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量；同時(shí)具備了無(wú)損和有損的壓縮模式、Alpha透明以及動(dòng)畫(huà)的特性，在JPEG和PNG上的轉(zhuǎn)化效果都非常優(yōu)秀、穩(wěn)定和統(tǒng)一。案例分析eleme首頁(yè)實(shí)戰(zhàn)對(duì)于之前所提到的圖片相關(guān)技術(shù)，在上節(jié)課完成的相關(guān)數(shù)據(jù)列表中進(jìn)行實(shí)戰(zhàn)優(yōu)化前后性能對(duì)比課程總結(jié)學(xué)習(xí)和掌握?qǐng)D片相關(guān)的優(yōu)化方法課程總結(jié)理解不同圖片格式在不同的業(yè)務(wù)