前端性能优化之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;
    }
}

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 Puppeteer入门初探