前端性能优化之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 进行页面性能分析及性能报告数据 ...
随机推荐
- BZOJ2196: [Usaco2011 Mar]Brownie Slicing
n<=500 * m<=500的方阵,先沿横坐标切A-1刀,再把每一块切B-1刀,得到A*B块,求这A*B块的数字之和的最小值的最大值. 最小值最大--二分,然后贪心切.每次扫一行,看这一 ...
- maven 编译出错 Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean
eclipse在使用maven的tomcat控件编译java程序时,报错 Failed to execute goal org.apache.maven.plugins:maven-clean-plu ...
- HDU 4622 (后缀自动机)
HDU 4622 Reincarnation Problem : 给一个串S(n <= 2000), 有Q个询问(q <= 10000),每次询问一个区间内本质不同的串的个数. Solut ...
- http的N种请求
GET通过请求URI得到资源 POST,用于添加新的内容 PUT用于修改某个内容 DELETE,删除某个内容 CONNECT,用于代理进行传输,如使用SSL OPTIONS询问可以执行哪些方法 PAT ...
- django学习之- Models笔记
1:创建数据库表 #单表# app01_user 生成的表明为 tb1class User(models.Model): name = models.CharField(max_length=32,d ...
- 前端学习之-- Jquery
Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...
- [bzoj4006][JLOI2015]管道连接_斯坦纳树_状压dp
管道连接 bzoj-4006 JLOI-2015 题目大意:给定一张$n$个节点$m$条边的带边权无向图.并且给定$p$个重要节点,每个重要节点都有一个颜色.求一个边权和最小的边集使得颜色相同的重要节 ...
- Fragment实践之聊天窗体
前几天刚学了android的fragment,总是停留在简单的demo,也许永远都学不会. 今天,我要动手向我的聊天软件开刀.今天.用Fragment来实现一个例如以下图效果的聊天界面. waterm ...
- No module named '_sqlite3'问题解决
Centos自带的python版本是2.7的,后面我自己装了3.5版本的,在创建应用的时候python manager.py startapp users 时,就会报No module named ' ...
- 解决cell切割线不是全屏问题
if ([_tableView respondsToSelector:@selector(setSeparatorInset:)]) { [_tableView setSeparatorInset:U ...