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

參考博客

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

認識漸進式圖片

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

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

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

口說無憑，看看效果

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

1、普通圖片生成

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

• 部署到服務器查看效果

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

• 最終效果

總結

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

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。