前端性能優化之優化圖片 && 優化顯示圖片

　　前端圖片優化一直以來都是熱門話題，從需求上來看，不少站點每每是圖片體積大於代碼體積， 圖片請求多餘代碼文件請求， 給前端的性能帶來了很大的困擾，那麼應該如何解決呢？ 

 

零、 認識圖片

　　咱們一般使用的圖片就是gif、png和jpg了。 

　　其中，gif格式是比較老的圖片格式，它的色彩效果最低（就是不清楚！！！），若是想要使用gif保存鮮豔圖片會讓你的網站看上去很是可怕。 可是gif有着不可忽視的優勢：體積小、有着極好的壓縮效果，支持動畫，而且支持透明效果，雖然這個透明沒有PNG格式圖片支持的強大。。。 動畫選擇gif沒有錯，若是你的圖片只有單調的色彩, 沒有漸變色，例如只有紅藍兩色，那麼選擇gif就再好不過了。 

　　另外，PNG圖片能夠說是最適合網絡的圖片了，優勢就是 無損壓縮，壓縮比率很高， 可漸變透明， 幾乎具有全部GIF的優勢， 缺點是不如JPG格式的顏色色彩豐富， 一樣的圖片體積也比JPG略大，可是PNG圖片應該是網站設計上最爲推廣的，好比Google就是一個很好的例子，它的全部站點中幾乎都是使用的PNG格式， 並且8位的PNG徹底能夠替代掉GIF。 

　　各方面比較：

大小比較：一般地，PNG ≈ JPG > GIF

透明性：PNG > GIF > JPG

色彩豐富程度：JPG > PNG >GIF
　

兼容程度：GIF ≈ JPG > PNG

 

1、雪碧圖

　　即css sprites， 就是把不少小圖片製做成一個大圖，而後做爲背景圖片使用，定位便可。

　　優勢： 很明顯： 減小了大量的http請求。

　　缺點： 背景定位較爲麻煩，其實不算缺點。

 

2、圖片壓縮

　　圖片壓縮是很簡單的，就是無損壓縮了。 

1. 優先使用png而不是GIF
2. 壓縮png
3. 去掉jpg的metadata
4. 壓縮gif動畫
5. 嘗試使用png8
6. 避免使用AlphaImageLoader
7. 壓縮動態生成的圖像
8. 使 favicon 更小，可緩存
9. 使用css sprites 

 

3、base64

　　base64編碼的大小比原圖大小更大一些，可是能夠減小http請求。

 

 

4、響應式圖片

　　通常咱們對於圖片的設定方法都是設置圖片爲width: 100%， 可是若是加載的圖片的實際尺寸很大，而咱們所須要的很小，那麼不可避免的就會形成浪費， 因此這時就可使用響應式圖片。 

　　主要用到的屬性就是 srcset 和 sizes 屬性。 

 

　　

 

5、延遲加載

假設個人網頁很長很長，圖片不少不少（好比多圖慎點那種），可是我可能看了一下就沒興趣了，那是否是徹底沒有必要加載後面的圖片了，這個時候就要有一個延遲加載的思想。

圖片延遲加載也稱懶加載，一般應用於圖片比較多的網頁，若是一個頁面圖片比較多，且頁面高度或寬度有好幾屏，頁面初次加載時，只顯示可視區域的圖片（非可視區域圖片使用1*1的圖片佔位，圖片大小css控制），當頁面滾動的時候，圖片進入了可視區域再進行加載（修改src），這樣能夠顯著的提升頁面的加載速度，更少的圖片併發請求數也能夠減輕服務器的壓力。若是用戶僅僅在首屏停留，還能夠節省流量。具體的實現方法能夠看一個插件，就叫lazeload。

 

 

6、 圖標字體

用過bootstrap的同窗確定對方便的fontawesome圖標字體印象深入，能夠無損放大縮小，能夠修改顏色，只要加個類名就可使用圖標，感受是否是很爽🌚。優點呢。。。矢量&方便好用，不過圖標沒有必定的量可能不大須要，並且矢量圖可能美工壓力也比較大，咱們只要知道怎麼用就行啦，有的時候用現成的圖標減輕一下美工同窗的工做量也是極好的。能夠看一下一個專門用來作圖標字體的網站。

 

 

7、 SVG

 

svg做爲矢量圖，和iconfont對比起來優點可能就是字體可能在樣式修改方面受限較多，其次字體文件通常都弄的挺大的，而後兼容性差點。svg也能夠認爲就是圖片，使用方法也很簡單。

1.直接做爲圖片文件引入

<img src=「gblogo.svg」 onerror=「this.onerror=null; this.src=」gblogo.png「」>
//or css 
background:url(gblogo.svg)

2.將svg代碼拷到html文件裏

<g class=「logo」 transform=「translate（0.000000，500.000000） scale（0.100000，-0.100000）」 fill=「#000000」 stroke=「none」>
//本質上仍是一個標籤，能夠定義樣式
.logo:hover{
    fill： #F08000;}

 

 

 

圖片顯示優化

　　背景：最近所作的項目中，相似於餓了麼這樣的平臺，就是相對簡單一些，而且，對於每一件商品，都有一個詳情頁，必需要進入這個詳情頁，才能加載一個很大的圖片來展現圖片詳情。

　　問題：因爲圖片比較大， 因此下載的過程會比較慢，因此出現的狀況就是，剛開始只顯示一個背景層，緊接着圖片開始一點一點的加載出來，而不是徹底加載出來（恩，學過計算機網絡的同窗應該是知道緣由的）， 這樣的用戶體驗並非很好。

　　改進方案： 首先，固定圖片外層div的高度和寬度，而後img設置爲100%（寬高都是如此），背景顏色要有，這樣，即便沒有顯示出來，也是能夠看得。重要，設置圖片的 onload 事件，首先要設置圖片爲display: none； 而後當圖片onload以後，咱們再將之加載出來，而且加載時透明度能夠是一個遞增的過程。 代碼大體以下（vue項目寫的）：

 <img src="picture" alt=""  style="display: none;" v-on:load="getSomething($event)" >

 

　　js以下：

getSomething (e) {
        var target = e.currentTarget;
        target.style.opacity = 0;
        target.style.display = 'block'
        var timer = setInterval(function () {
          target.style.opacity = parseFloat(target.style.opacity) + 0.01;
          if (parseFloat(target.style.opacity) >= 0.98) {
            clearInterval(timer);
          }
        }, 30);
      }

 

　　這樣，圖片的顯示就是一個動態的過程， 也不會有視覺上的突變，看着會比較舒服。