页面体验提升小技巧—渐进式图片
前端性能方面有許多可優(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Safari支持Service Work
- 下一篇: [贝聊科技]网页端「应用跳转」技术实现演