前端性能優(yōu)化是一件很瑣碎的事情柜候。它不像其它很多技術(shù)否过，在確切有限的步驟下就可以把功能做好。它就像是在打掃屋子李丰，需要時(shí)常去檢查屋子是否有不整潔的地方苦锨，然后立即整理。所以在性能優(yōu)化的過程中會(huì)遇到各方面的問題嫌套。本文的主題是聊聊怎么讓圖片更“整潔”逆屡。
什么是WebP
WebP是一種新的文件格式，相比于jpg踱讨、png魏蔗、gif，在相同的圖片質(zhì)量的情況下痹筛，它有著更小的圖片大小莺治，可以大大縮小頁(yè)面加載時(shí)間≈愠恚可以參考http://isux.tencent.com/introduction-of-webp.html
如何生成WebP格式的圖片
WebP官網(wǎng)上提供了轉(zhuǎn)換工具谣旁，可以把jpg、png圖片轉(zhuǎn)換成WebP滋早。
如何使用
由于WebP并沒有被大多數(shù)瀏覽器原生支持榄审，所以在使用時(shí)并不像jpg、png圖片一樣輕便杆麸。WebP的兼容方案一般分為3種：
1搁进，服務(wù)器端判斷是否應(yīng)該返回WebP格式的圖片
當(dāng)服務(wù)器端接收到瀏覽器的圖片請(qǐng)求時(shí)，根據(jù)User-Agent判斷是否應(yīng)該返回WebP格式的圖片昔头。這種方法的優(yōu)勢(shì)很明顯饼问，前端幾乎不需要做任何修改就可以完美的完成此次優(yōu)化任務(wù)。缺點(diǎn)也很明顯揭斧，你需要恭敬地給后端大大倒上一杯咖啡莱革，然后真誠(chéng)地說：“加個(gè)功能唄，這個(gè)真的很簡(jiǎn)單！Ｖ咽印捐名！”
當(dāng)然，這里有一個(gè)造好的輪子闹击，你可以提供給后端大大桐筏。pagespeed，Google開發(fā)的一個(gè)支持Nginx和Apache的模塊拇砰，主要用來提高頁(yè)面加載速度。其中有一個(gè)功能convert_jpeg_to_webp狰腌，可以實(shí)現(xiàn)當(dāng)支持WebP的瀏覽器請(qǐng)求圖片時(shí)除破，可以自動(dòng)將jpg等轉(zhuǎn)換成WebP。pagespeed其它性能優(yōu)化的功能也值得嘗試哦~
2琼腔，瀏覽器判斷是否應(yīng)該使用WebP格式的圖片
首先瑰枫，你需要知道普通格式圖片的URL和WebP格式圖片的URL。通過瀏覽器特性偵測(cè)丹莲，來判斷應(yīng)該使用哪一類圖片光坝。這種方式的缺點(diǎn)是只適用于javascript動(dòng)態(tài)生成的圖片，無(wú)法統(tǒng)一處理CSS中引用的背景圖片甥材。
3盯另，替瀏覽器寫解析程序
我們要做的事情是，“你沒有實(shí)現(xiàn)解析WebP的功能洲赵，那我來吧”鸳惯。對(duì)于不支持WebP的瀏覽器，我們通過JavaScript將其轉(zhuǎn)碼成瀏覽器支持的格式叠萍，以base64的形式賦值給DOM元素芝发。這個(gè)輪子已經(jīng)被造好了，只需要簡(jiǎn)單的引入webpjs苛谷，就可以實(shí)現(xiàn)WebP的轉(zhuǎn)碼功能辅鲸。這種方式能夠處理所有的圖片，包括Img標(biāo)簽和背景圖片腹殿。不過由于是JavaScript實(shí)現(xiàn)轉(zhuǎn)碼独悴，所以對(duì)頁(yè)面性能有所影響。
偵測(cè)瀏覽器是否支持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中導(dǎo)出WebP格式的圖片悟耘，觀察是否能夠正常導(dǎo)出
function checkWebp() {
try {
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
} catch (err) {
return false;
}
}
寫在最后
如果你打不開本文中的某些鏈接落蝙，那么你可能需要先翻個(gè)墻~
