成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

頁(yè)面體驗(yàn)提升小技巧—漸進(jìn)式圖片

Lyux / 1364人閱讀

摘要：漸進(jìn)式圖片的使用前端性能方面有許多可優(yōu)化的點(diǎn)，而這些優(yōu)化帶來(lái)的就是用戶體驗(yàn)的提升。漸進(jìn)式圖片渲染過程中，會(huì)先顯示整個(gè)圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來(lái)越清晰。而普通圖片是逐行掃描加載，已渲染的部分清晰可見。

漸進(jìn)式圖片的使用 
前端性能方面有許多可優(yōu)化的點(diǎn)，而這些優(yōu)化帶來(lái)的就是用戶體驗(yàn)的提升。今天我們要聊的東西并不能給性能帶來(lái)提升，但卻能在一定程度上提升用戶的體驗(yàn)。
參考博客

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

認(rèn)識(shí)漸進(jìn)式圖片

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

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

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

口說(shuō)無(wú)憑，看看效果

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

1、普通圖片生成

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

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

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

最終效果

總結(jié)

????從直觀上來(lái)看好像漸進(jìn)式圖片要加載的快一點(diǎn)，這就是漸進(jìn)式圖片能夠達(dá)到的體驗(yàn)提升效果。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51820.html

相關(guān)文章

  • 談?wù)刉eb應(yīng)用中的圖片優(yōu)化技巧及反思

    摘要：要注意老舊的瀏覽器不支持的特性，它會(huì)繼續(xù)正常加載屬性引用的圖像。五安全地使用圖片的優(yōu)勢(shì)這里不再贅述，簡(jiǎn)單來(lái)說(shuō) 這篇文章，我們將一起探討，web應(yīng)用中能對(duì)圖片進(jìn)行什么樣的優(yōu)化，以及反思一些負(fù)優(yōu)化手段 一、為什么要對(duì)圖片進(jìn)行優(yōu)化 對(duì)于大多數(shù)前端工程師來(lái)說(shuō)，圖片就是UI設(shè)計(jì)師(或者自己)切好的圖，你要做的只是把圖片丟進(jìn)項(xiàng)目中，然后用以鏈接的方式呈現(xiàn)在頁(yè)面上，而且我們也經(jīng)常把精力放在項(xiàng)目的打包...

    zone 評(píng)論0 收藏0

  • ELSE 技術(shù)周刊(2017.12.25期)

    摘要：業(yè)界動(dòng)態(tài)引擎發(fā)布，在速度和內(nèi)存優(yōu)化上又帶來(lái)了一些提升。程序人生前端技術(shù)發(fā)展回顧前端領(lǐng)域在年再次以狂熱的節(jié)奏向前發(fā)展。技術(shù)周刊由小組出品，匯聚一周好文章，周刊原文。 業(yè)界動(dòng)態(tài) V8 release v6.4 V8引擎發(fā)布v6.4，在速度和內(nèi)存優(yōu)化上又帶來(lái)了一些提升。對(duì)于instanceof操作符的優(yōu)化，帶來(lái)了3.6x速度提升，同時(shí)使得uglify-js提高了15-20%(結(jié)果來(lái)自Web ...

    Carbs 評(píng)論0 收藏0

  • JavaScript 工作原理之十一－渲染引擎及性能優(yōu)化小技巧

    摘要：在中渲染樹中的每個(gè)節(jié)點(diǎn)即是一個(gè)渲染器或者渲染器對(duì)象。計(jì)算的樣式每個(gè)渲染器對(duì)象代表一個(gè)矩形區(qū)域通常是和一個(gè)節(jié)點(diǎn)的盒模型相對(duì)應(yīng)。坐標(biāo)系統(tǒng)是相對(duì)于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區(qū)域。 原文請(qǐng)查閱這里，略有刪減，本文采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。 ...

    GraphQuery 評(píng)論0 收藏0

  • JavaScript 工作原理之十一－渲染引擎及性能優(yōu)化小技巧

    摘要：在中渲染樹中的每個(gè)節(jié)點(diǎn)即是一個(gè)渲染器或者渲染器對(duì)象。計(jì)算的樣式每個(gè)渲染器對(duì)象代表一個(gè)矩形區(qū)域通常是和一個(gè)節(jié)點(diǎn)的盒模型相對(duì)應(yīng)。坐標(biāo)系統(tǒng)是相對(duì)于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區(qū)域。 原文請(qǐng)查閱這里，略有刪減，本文采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。 ...

    Allen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<