前端性能优化之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+款云产品!
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 一些 ssh 小技巧
【推荐】 网易易盾验证码的安全策略
前端性能优化之WebP的更多相关文章
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- web前端性能优化指南
web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...
- 移动 H5(PC Web)前端性能优化指南
原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...
- 第146天:移动H5前端性能优化
移动H5前端性能优化 一.概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通 ...
- [转]移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
随机推荐
- C++动态特性和C++对象模型——《高质量程序设计12章》
1.动态特性 静态特性和动态特性,编译时和运行时 虚函数 (1)虚函数的叫覆盖,虚函数不是实现多态的唯一手段(其他语言也可能采用别的方法). 抽象基类: (1)如果将基类的虚函数声明为纯虚函数,则基类 ...
- 洛谷—— P1536 村村通
P1536 村村通 题目描述 某市调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.市政府“村村通工程”的目标是使全市任何两个城镇间都可以实现交通(但不一定有直接的道路相连, ...
- [Bzoj4521][Cqoi2016]手机号码(数位dp)
4521: [Cqoi2016]手机号码 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 870 Solved: 505[Submit][Status ...
- [Bzoj1296][Scoi2009] 粉刷匠 [DP + 分组背包]
1296: [SCOI2009]粉刷匠 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2184 Solved: 1259[Submit][Statu ...
- 2017多校Round2(hdu6045~hdu6055)
补题进度:10/11 1001(不等式) 根据题意列不等式,解一解就行了 1002(套路) 题意: 给定一个随机产生的1e6*1e6的矩阵和一个1e3*1e3的矩阵,你要回答这个1e3*1e3的小矩阵 ...
- sys.argv的妙用:python命令行参数列表的修改、增加、删除
是否妙用取决于你怎么用 1.sys.argv是用来获取命令行参数的方法,本身是一个list.你搜其实用方法,这方面的介绍最多,这里不赘述 2.那么问题是:sys.argv可以赋值吗?可以扩充吗?可以修 ...
- leetcode:238. Product of Array Except Self(Java)解答
转载请注明出处:z_zhaojun的博客 原文地址 题目地址 Product of Array Except Self Given an array of n integers where n > ...
- 全局最小割模版 n^3
//点标从0-n-1, 開始时先init 复杂度n^3 //对于边(u,v,flow): //g[u][v]+=flow; //g[v][u]+=flow; typedef long long ll; ...
- 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示
对于通过用户输入关键词实现自己主动弹出相关搜索结果,这里本人给两种解决方式,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的keyword异步调用数据表中的相关 ...
- UIButton的图片和文字相对位置调整
通常.假设直接设置UIButton的图片和文字,默认的两者相对位置可能不是我们想要的,那么须要进行调整. 须要用到的函数例如以下: UIEdgeInsetsMake(CGFloat top, CGFl ...