前端體驗優(yōu)化之漸進(jìn)式圖片
前言
關(guān)于前端的性能及體驗問題，圖片的加載絕對是重中之重，尤其是在一些有著許多大圖的頁面，在網(wǎng)絡(luò)不穩(wěn)定或稍慢的時候，我們經(jīng)常能夠看到頁面中圖片的位置是一片空白，等圖片加載完成才開始慢慢渲染，在這段時間對用戶的體驗其實是非常不友好的。
那么我們應(yīng)該如何來進(jìn)行優(yōu)化呢？
大家想說的是不是：把圖片壓縮一下不就好了？是的，圖片壓縮是我們前端開發(fā)過程必備的一步，但是光靠圖片壓縮并不能解決所有的圖片體驗問題，有些圖片本身就比較大，內(nèi)容質(zhì)量都比較高，此時壓縮圖片帶來的加載性能提升似乎就沒有那么明顯了，這時候我們就可能需要使用一些技巧來進(jìn)行優(yōu)化了。
background-image
之前在需求中有使用過background-image來進(jìn)行優(yōu)化，先來看看效果：
優(yōu)化前：
優(yōu)化后：
從上述對比中可以清晰看出，優(yōu)化后的圖片加載體驗相較于優(yōu)化前實現(xiàn)了顯著提升。優(yōu)化后，用戶所經(jīng)歷的白屏?xí)r間顯著縮短，取而代之的是圖片從模糊逐漸變得清晰的過程。這意味著用戶能夠更早地預(yù)覽到圖片的內(nèi)容，而無需再焦急地等待白屏消失，從而大大提升了用戶的體驗感受！
原理
原理實際上很簡單，從上圖我們可以看到優(yōu)化后的效果實際上是加載了兩張圖片，一張小圖（1.9k），一張原圖（2.8M），所有最開始看到的模糊圖片其實是這張小圖，最后變清晰看到的是原圖。
這里使用的技術(shù)也很簡單，只需要CSS的background-image
?
background-image 屬性用于為一個元素設(shè)置一個或者多個背景圖像。
.pic_container {
width: 300px;
height: 375px;
background-image: url("../assets/origin.jpg"), url("../assets/small.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}在繪制時，圖像以 z 方向堆疊的方式進(jìn)行。先指定的圖像會在之后指定的圖像上面繪制。因此指定的第一個圖像“最接近用戶”。
也就是說，原圖與縮略圖是疊在一起的，并且原圖在上縮略圖在下，在原圖還沒加載完成時，可以先看到下面的縮略圖，也就是那張模糊的圖片，等原圖加載完成之后，瀏覽器才會開始渲染原圖，由于兩張圖是在同一個位置，所以我們可以看到一個從模糊變清晰的過程。
img + background-image
雖然background-image天生就支持設(shè)置多個背景圖，但更多時候我們還是使用img來承載圖片，但是img的src屬性可沒有這一特點。是的，如果不使用JS的話光靠img也是做不到上面的效果的。
如果想要使用img的話，可以使用img + background-image組合來實現(xiàn)。
<div class="pic_container">
<img src="../assets/origin.jpg" alt="origin" />
</div>
<style lang="scss" scoped>
.pic_container {
background-image: url("../assets/small.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
img {
width: 300px;
height: 375px;
}
}
</style>
效果跟上面那種類似，實際上原理也差不多。
需要注意的是：img元素占位在圖片還沒開始渲染時，它在頁面上實際上是透明的，所以我們能夠在看到下面的背景圖片，等img資源加載完成開始渲染時，才會慢慢遮蓋下面的背景圖。
為了更方便的復(fù)用，我們可以把它封裝成一個通用組件用來提升用戶體驗，但該組件需要提供兩張圖片，一張原圖，一張縮略圖。
這樣做有的同學(xué)可能覺得很麻煩，那么有沒有更簡便的方法呢？
漸進(jìn)式圖片
除了以上這兩種方案，我還見過另外一種方案實現(xiàn)的效果，但它并不依賴于background-image，只需要img元素就可以，比如：
這種效果應(yīng)該圖片格式的功勞，通常網(wǎng)站使用的 JPEG 的內(nèi)容顯示通常有兩種類型：
- 基線 JPEG
- 漸進(jìn)式 JPEG
一般來說我們見的比較多的應(yīng)該是基線JPEG
基線JPEG（Baseline JPEG）
基線 JPEG 最常見的應(yīng)用之一是在 Web 瀏覽器中呈現(xiàn)的圖像?；€ JPEG 算法在從網(wǎng)絡(luò)下載處理數(shù)據(jù)時逐行渲染圖像。當(dāng)數(shù)據(jù)從網(wǎng)絡(luò)到達(dá)計算機(jī)的緩沖區(qū)時，數(shù)據(jù)以流的形式進(jìn)行處理?；€式的編碼方式是圖片從上到下，從左到右地進(jìn)行處理和編碼。這就會形成我們查看大圖時比較常見的從上至下逐行顯示，即首先顯示圖像的頂部。然后它會逐行加載到底部，直到顯示出完整的圖像。
這種格式的圖片在面對越大的圖片時，往往需要我們等待越長的時間才能看到完整圖片，比較容易讓網(wǎng)站流失用戶
漸進(jìn)式 JPEG（Progressive JPEG）
漸進(jìn)式 JPEG 以特定方式壓縮照片和圖形，與基線 JPEG 不同，PJPEG 在 Web 瀏覽器中呈現(xiàn)時，會首先給出模糊圖像的外觀。然后一點一點地開始圖片渲染，直到它顯示完全渲染的圖像。瀏覽器實際上是逐行解釋圖像，但在占位符中提供了完整圖像的模糊預(yù)覽。隨著 Web 瀏覽器的渲染引擎處理數(shù)據(jù)，圖像的對比度開始變得更清晰、更詳細(xì)。直到最后渲染完畢，用戶將看到完整的清晰圖像。
如何生成漸進(jìn)式圖片
通常情況下，設(shè)計師給我們提供的切圖素材通常就是普通格式的圖片，并不支持漸進(jìn)式加載，但實際上他們在導(dǎo)出圖片的時候可以選擇導(dǎo)出為漸進(jìn)式圖片圖片的，但他們可能并不會幫你這樣干。
那么我們自己能不能將非漸進(jìn)式圖片轉(zhuǎn)換為漸進(jìn)式圖片呢，答案是可以的！
GraphicsMagick
我們可以使用該工具庫來生成漸進(jìn)式圖片，我們只需要安裝node對應(yīng)的版本
npm install gmconst gm = require('gm').subClass({ imageMagick: true });
const path = require('path');
function transformImage(imagePath, transform, generatePath, callback) {
gm(imagePath)
.interlace('Line') // 生成漸進(jìn)式圖片
.resize(transform.width, transform.height)
.write(generatePath, callback);
}
const basePath = path.join(__dirname, '../src/assets/');
transformImage(
path.join(basePath, 'sy.pic.jpg'),
{ width: 500, height: 500 },
path.join(basePath, 'sy.line.jpeg'),
(res) => {
console.log(res);
}
);如何選擇
首先明確的一點，漸進(jìn)式圖片的加載體驗的確是要比普通圖片的加載要好上不少，無論是我們自己模擬的漸進(jìn)式加載還是通過依賴圖片本身算法來實現(xiàn)的，這幾種方案在各大網(wǎng)站都能看到在應(yīng)用。
漸進(jìn)式圖片的優(yōu)缺點
優(yōu)點：
- 移動網(wǎng)絡(luò)流量優(yōu)化：漸進(jìn)式圖片下載技術(shù)允許用戶僅初始下載圖片的一部分，有效降低圖像分辨率并減少數(shù)據(jù)使用量，特別適用于移動網(wǎng)絡(luò)環(huán)境。
- 減少加載等待時間：漸進(jìn)式圖片能夠讓用戶先快速預(yù)覽圖片的輪廓，隨后逐步加載更多圖片細(xì)節(jié)，提升用戶體驗。
缺點：
- 圖片格式轉(zhuǎn)換成本：由于大多數(shù)現(xiàn)有圖片采用普通壓縮格式，轉(zhuǎn)換為漸進(jìn)式格式需要額外的處理成本。
- 兼容性：部分老舊瀏覽器（例如IE8）對漸進(jìn)式圖片格式的支持不足，盡管隨著時間推移，這些瀏覽器將逐漸被市場淘汰，但當(dāng)前仍可能影響部分用戶的瀏覽體驗。
