前言
此篇文章估計不會太長，有移除首頁的風險，但是老夫（稱老夫是因為我們真正的葉小釵其實都100多歲啦）是不會怕滴。所以，我來了喲！
題外話：今天我們一起還看了一道前端的面試題，而後我本來還想多找幾道來做做，但是沒找到什麼合適的，各位有什麼好的前端面試題請給我留言哦，我們一起來分析面試題進步喲！
前端時間，我與我們的產品有一次討論，是針對圖片壓縮的，因為我對圖片或者說PS這塊是個小白，所以當時做了一個廣告圖片有100來k也直接給傳上去了，結果被我們的同事搞起來一壓縮，便只有50多k了，此次交流對圖片壓縮這塊有了一點點心得，並且為第二次交流埋下伏筆，第二次便是圖片由模糊變清晰的研究了。
網頁圖片格式
此處我先對我們的圖片格式做一下普及吧，參考：
【整理】詳說JPG,GIF及PNG各型別的圖片格式
GIF
透明型別，可以全透明或者全不透明，半透明這種事情就不要找他了，並且這個傢伙可以做動畫哦
gif是一種無損耗的圖片格式
gif採用lzw演算法進行壓縮，當壓縮gif過程中畫素由上到下進行壓縮，也就是說橫向的gif圖片比縱向的小(500*10比10*500小)
gif支援可選擇性的間隔漸進顯示
JPEG
不支援透明
不支援動畫
該圖片非常容易損耗
支援隔行漸進顯示（ie不支援，ie會再整個圖片資訊完全到達後再顯示）
jepg尤其適合web上面的攝影圖片和數字相簿
PNG
支援各種透明，但在IE6下有bug需要使用濾鏡處理
不支援動畫
任何操作都不會損耗其質量
支援間隔漸進增強，但會造成圖片尺寸變大：
png8(布林透明)
相當於靜態gif，只有256色，支援索引透明，就是指定一個畫素點不是透明
png8(alpha透明)
可指定畫素點的透明度，例如50%透明度
優點在於比png24/32小，效果一樣，缺點為ie6不支援
png24
不透明，顏色很多不止256色，PS匯出的png24事實上為png32
png32
和PS裡面的PSD一樣，包含圖層和通道資訊
以上是關於圖片的一些資訊，我們大概瞭解下便是，其中我要說一說其中的PNG，特別是交錯png
PNG交錯在使用瀏覽器欣賞該圖片時就會以由模糊逐漸轉為清晰的效果方式漸漸顯示出來。PNG先進的交錯式方法，使影像得以水平及垂直方式顯像在螢幕上，加快了下載的速度，作用：交錯可使下載時間感覺更短，並使瀏覽者確信正在進行下載。PNG無交錯、不交錯就沒這個作用。
圖片的顯示
我們知道img標籤在dom載入時候是不會載入的，而是在dom結構全部出來後並形成了渲染樹（佈局結束），才開始載入。
而其載入順序也是從上而下的載入，意思是圖片我們是先看到上面再看到下面，但是很明顯這不是一個好的顯示方式，我們若是一開始可以看到模糊的圖形然後再慢慢變清晰是不是好很多呢？
肯定好很多啦。。。
於是我們討論到如何實現，但是就說到了交錯PNG，我當時雖然信了，因為我對此不太瞭解，但是下來思考下卻感覺有點不對勁！
使用者的疑惑
現在我們來想象下QQ空間的做法（這塊純粹瞎扯），我現在作為一個使用者，我上傳圖片來了
① 我想將QQ空間作為雲端儲存的地方，上傳了我2M的畢業照
② 空間根據需求生成了一張縮圖與一張大圖
③ 我們首先看到縮圖，而後看到大圖，點選原圖時候便看到我最初2M的照片
以上是我以為的邏輯，QQ空間是不是這個邏輯我們不去關注他，因為站在使用者角度，我一定是想保留我最初的東西。
好了事到如今，QQ空間究竟怎麼做的呢？？？那個太複雜了，我們也不去關注，我這裡說下我是怎麼做的。
實現圖片由模糊到清晰
我們的相簿顯示一般是這個樣子的：
上面是縮圖，下面是大圖，在這裡我們其實可以對其縮圖做文章！！！
我們在大圖顯示完之前可以用縮圖“代替”大圖嗎，來看看我們的邏輯：
① 縮圖在相簿上方，其最先載入，就算在下方，因為縮圖尺寸很小載入十分迅速
② 最初將縮圖放到大圖顯示位置，將其大小設定為大圖大小（此尺寸有多種方法可獲取，比如上傳時候便計算結束）
② 將大圖佈局置於縮圖前，因為縮圖已經展示，但是因為過大而顯得有點模糊，但大圖慢慢載入其由上至下變得清晰給人一種模糊到清晰的錯覺
④ 流程結束
於是我們來看看我們的QQ空間吧，看之前我們用限速工具，給我們的火狐限速：
PS：限速後開空間巨慢。。。
怎麼樣，夠慢了的吧！
注意看其由上到下的變化哦，然後我這裡找出了證據
PS：我開啟網上限制怎麼還是很慢，看來是我網速慢的原因啦。。。
請看我這邊用紅框圈著的三塊地方：
第一個為相簿顯示的容器，relative定位的
第二個為上面的小縮圖，很小的那種哦：
看吧，這裡活生生的將人家扯那麼大。。。。。
第三個框便是主角，大圖啦：
結論
從其整個排布來看，與我們思考的一致，他這樣做好處多多的有哦，比如我們這裡上面的圖片導航：
我們看到上面的縮圖早就顯示出來了，點選下一張的時候縮圖會展示出來，不會出現空白的斷層，然後大圖慢慢的顯示讓使用者願意停在那裡。
結語
好啦，今天我們研究了一道面試題，後面又研究了圖片由模糊到清晰的方案，若是您有更好的解決方案不要藏著哦！
好啦，若是你有好的web前端面試題也請留下，我最近在做這方面的整理，後面對各位也會有幫助滴，最後留一張老夫的玉照吧！
