前端效能優化之WebP
此文已由作者吳維偉授權網易雲社群釋出。
歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。
前端效能優化是一件很瑣碎的事情。它不像其它很多技術，在確切有限的步驟下就可以把功能做好。它就像是在打掃屋子，需要時常去檢查屋子是否有不整潔的地方，然後立即整理。所以在效能優化的過程中會遇到各方面的問題。本文的主題是聊聊怎麼讓圖片更“整潔”。
什麼是WebP
如何生成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;
}
}網易雲免費體驗館，0成本體驗20+款雲產品！
更多網易技術、產品、運營經驗分享請點選。