前言
此篇文章估計不會太長，有移除首頁的風險，但是老夫（稱老夫是因為我們真正的葉小釵其實都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前端面試題也請留下，我最近在做這方面的整理，后面對各位也會有幫助滴，最后留一張老夫的玉照吧！
