前端性能优化是一件很琐碎的事情。它不像其它很多技术，在确切有限的步骤下就可以把功能做好。它就像是在打扫屋子，需要时常去检查屋子是否有不整洁的地方，然后立即整理。所以在性能优化的过程中会遇到各方面的问题。本文的主题是聊聊怎么让图片更“整洁”。
什么是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;
}
}
写在最后
如果你打不开本文中的某些链接，那么你可能需要先翻个墙~
网友评论