圖像優(yōu)化是提高前端性能的重要組成部分。傳統(tǒng)上，我們使用JPG / JPEG，GIF和PNG圖像，但是Google和Chrome小組開發(fā)了WEBP格式，該格式可處理文件大小并優(yōu)化渲染。如果您在Chrome瀏覽器中訪問GIPHY之類的網(wǎng)站，則將獲得WEBP，但如果在Firefox中訪問同一頁面，則將獲得GIF。由于GIPHY延遲加載其圖像，因此GIPHY可以將WEBP特征檢測與JavaScript結(jié)合使用。

Googler和Service Worker的先驅(qū)Jake Archibald最近發(fā)布了一個摘要，顯示了如何使用Service Worker來檢測WEBP支持：

async function supportsWebp() {
  if (!self.createImageBitmap) return false;
  
  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
  }
  
  (async () => {
  if(await supportsWebp()) {
    console.log('does support');
  }
  else {
    console.log('does not support');
  }
})();

獲取有效的WEBP數(shù)據(jù)URI，以確定瀏覽器是否支持WEBP！他的腳本還使用async / await來處理promise，我將在此博客上稍后介紹。請注意，此代碼在服務(wù)人員外部運行，因此您可以在自己的項目中的任何位置使用它。

如果您的網(wǎng)站關(guān)注圖像，請考慮使用WEBP格式化圖像；Chrome的市場份額很大，因此絕對值得。如果您喜歡這樣的小技巧，請務(wù)必關(guān)注我哦！