前端性能方面有許多可優(yōu)化的點，而這些優(yōu)化帶來的就是用戶體驗的提升。今天我們要聊的東西并不能給性能帶來提升，但卻能在一定程度上提升用戶的體驗。

參考博客

????場景：在訪問頁面的時候如果圖片較大或者網(wǎng)速慢的情況我們會看到圖片加載起來是有一個明顯過程的，就是從上到下逐行呈現(xiàn)出來，這給用戶的信號就是再等等圖片還在加載中，并且圖片沒有加載出來的部分呈現(xiàn)一片空白，不利于體驗，下面就看看漸進式圖片怎么緩解這一情況

認識漸進式圖片

漸進式圖片其實是一種JPEG格式的圖片，和普通的JPEG圖片的區(qū)別如下：

• 普通圖片渲染時，數(shù)據(jù)將按照存儲時的順序從上到下逐行掃描被顯示出來的，直到所有的數(shù)據(jù)都被讀取完畢，就完成了整張圖片的顯示。

• 漸進式圖片渲染過程中，會先顯示整個圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來越清晰。這種格式的主要優(yōu)點是在網(wǎng)絡(luò)較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。

口說無憑，看看效果

• 生成兩張相同的圖片，均為JPEG格式

1、普通圖片生成

2、漸進式圖片生成（直接ps保存為JPEG格式，勾選連續(xù)）

• 部署到服務(wù)器查看效果

????效果描述：從上面可以看到，兩張圖片的大小是差不多的，漸進式圖片一開始呈現(xiàn)的效果為好像是一下子就完全加載出來了，只是看起來有點模糊。而普通圖片是逐行掃描加載，已渲染的部分清晰可見。

• 最終效果

總結(jié)

????從直觀上來看好像漸進式圖片要加載的快一點，這就是漸進式圖片能夠達到的體驗提升效果。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的页面体验提升小技巧—渐进式图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。