前端效能優化之WebP

前端效能優化是一件很瑣碎的事情。它不像其它很多技術，在確切有限的步驟下就可以把功能做好。它就像是在打掃屋子，需要時常去檢查屋子是否有不整潔的地方，然後立即整理。所以在效能優化的過程中會遇到各方面的問題。本文的主題是聊聊怎麼讓圖片更“整潔”。

什麼是WebP

WebP是一種新的檔案格式，相比於jpg、png、gif，在相同的圖片質量的情況下，它有著更小的圖片大小，可以大大縮小頁面載入時間。可以參考http://isux.tencent.com/introduction-of-webp.html

如何生成WebP格式的圖片

WebP官網上提供了轉換工具，可以把jpg、png圖片轉換成WebP。

如何使用

由於WebP並沒有被大多數瀏覽器原生支援，所以在使用時並不像jpg、png圖片一樣輕便。WebP的相容方案一般分為3種：

1，伺服器端判斷是否應該返回WebP格式的圖片

當伺服器端接收到瀏覽器的圖片請求時，根據User-Agent判斷是否應該返回WebP格式的圖片。這種方法的優勢很明顯，前端幾乎不需要做任何修改就可以完美的完成此次優化任務。缺點也很明顯，你需要恭敬地給後端大大倒上一杯咖啡，然後真誠地說：“加個功能唄，這個真的很簡單！！！”
當然，這裡有一個造好的輪子，你可以提供給後端大大。pagespeed，Google開發的一個支援Nginx和Apache的模組，主要用來提高頁面載入速度。其中有一個功能convert_jpeg_to_webp，可以實現當支援WebP的瀏覽器請求圖片時，可以自動將jpg等轉換成WebP。pagespeed其它效能優化的功能也值得嘗試哦~

2，瀏覽器判斷是否應該使用WebP格式的圖片

首先，你需要知道普通格式圖片的URL和WebP格式圖片的URL。通過瀏覽器特性偵測，來判斷應該使用哪一類圖片。這種方式的缺點是隻適用於javascript動態生成的圖片，無法統一處理CSS中引用的背景圖片。

3，替瀏覽器寫解析程式

我們要做的事情是，“你沒有實現解析WebP的功能，那我來吧”。對於不支援WebP的瀏覽器，我們通過JavaScript將其轉碼成瀏覽器支援的格式，以base64的形式賦值給DOM元素。這個輪子已經被造好了，只需要簡單的引入webpjs，就可以實現WebP的轉碼功能。這種方式能夠處理所有的圖片，包括Img標籤和背景圖片。不過由於是JavaScript實現轉碼，所以對頁面效能有所影響。

偵測瀏覽器是否支援WebP

方法1，嘗試載入一張WebP圖片，觀察是否能夠正常載入

(function () {
    var WebP = new Image();
    WebP.onload = WebP.onerror = function () {
        if (WebP.height != 2) {
            // 不支援WebP
        } else {
            // 支援WebP
        }
    };
    WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})();

方法2，嘗試從canvas中匯出WebP格式的圖片，觀察是否能夠正常匯出

function checkWebp() {
    try {
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    } catch (err) {
        return false;
    }
}

寫在最後

如果你打不開本文中的某些連結，那麼你可能需要先翻個牆~