前端性能优化之WebP图片
前言
前端性能涉及方方面面, 根据优化角度切入点的不同可以分为页面工程优化和代码细节优化两大方向。
- 页面工程优化: 从页面请求开始, 涉及网络协议、 资源配置、 浏览器性能、 缓存等;
- 代码细节优化: JavaScript 对 DOM 操作等。
今天要介绍的是一种叫WebP格式的图片。
WebP介绍
WebP 是由Google开发的一种新的图片格式,它支持有损压缩、无损压缩和透明度,压缩后的文件大小比JPEG、PNG等都要小。诸多的好处使它成为了当下前端性能优化的重要切入点之一。
使用WebP
由于之前的一个项目中大量的使用了图片,这就让图片资源的优化成为了整个项目性能优化的瓶颈。虽然图片懒加载对性能有一定的提升,但是为了让性能得到更大的提升,我调研并应用了 WebP 格式图片进行替换。
WebP 的兼容性还不是很好,不过好在它兼容 Chrome,以及 Android 的 webview。
因为不是所有浏览器都支持 WebP 格式,为了解决问题,我进行了多种尝试
要么确保在支持 WebP 格式的浏览器中使用,要么让不支持 WebP 的浏览器支持这种格式。
为了让 WebP 可以应用到支持它的浏览器,并且在不支持的浏览器中依然使用传统的图片格式,
解决方案1:
使用<picture>
标签,<picture>
是 H5 中的一个新标签,类似<video>
它也可以指定多个格式的资源,由浏览器选择自己支持的格式进行加载。
<picture class="picture"><source type="image/webp" srcset="image.webp"><img class="image" src="data:image.jpg">
</picture>
如果浏览器不支持 WebP 格式,那么会自动使用 img 标签,如果支持就会使用 WebP 图片。并且当浏览器不支持 <picture>
标签时,也会默认使用 img 标签,图片仍然会正常展示。只不过 css 无法选取 <picture>
标签,但是仍然会选取到 img 标签。
这种方式兼容性还算不错,不过依然有很大的局限性,如不能作用于 css 中的图片、背景图片。
解决方案2:
使用JS替换图片的URL,类似图片懒加载的原理,根据浏览器是否支持 WebP 格式,给 img 的 src 赋不同的值。
具体的操作就是给浏览器一个 WebP 格式的图片,看浏览器是否能正确渲染,在这个异步的方法中根据渲染的成功与否,执行回调函数,然后将结果存储在localstorage中,避免重复检查。代码如下:
function checkWebp(callback) {var img = new Image();img.onload = function () {var result = (img.width > 0) && (img.height > 0);callback(result);};img.onerror = function () {callback(false);};img.src = 'data:image/webp;base64,lAABSoBAQVXD+JaQAUkRAQCA4ADsJAAdAIBYAUAAlGRAwAA3AAEAA';
}
然后根据 checkWebp 的回调函数参数判断是否支持webp格式来决定是否替换src
function showImage(supWebp){var imgs = Array.from(document.querySelectorAll('img'));imgs.forEach(function(i){var src = i.attributes['data-src'].value;// 如果支持则替换if (supWebp){src = src.replace(/\.jpg$/, '.webp');}i.src = src;});
}checkWebp(showImage);
此种方式较为常用,也是社区里最为推荐的一种方式,可以很好的弥补方案1的缺陷。
解决方案3:
让不支持 WebP 的浏览器支持 WebP 并不是不可能,但是根据目前的情况来看,很多项目没有必要这么做。因为虽然 WebP 的解码器是开源的,并且已经有用 js 写的比较成熟的 WebP 解码器,引入库按照说明即可进行解码成 base64,就可以让不支持 WebP 的浏览器支持 WebP ,不过由于 js 解码能力有限,速度比较慢,对性能有一定的影响,所以不是特别推荐,也不是目前主流的做法,需要自行根据项目实际情况选择使用。
结语
以上就是目前比较常见的支持 WebP 的做法,经过各种流量测试,全站替换 WebP 后性能提升25%左右,虽然没有达到官方统计的30%以上,但提升还是非常大的。如果项目中大量的使用图片,那么 WebP 绝对是不可忽视的性能优化点。
前端性能优化之WebP图片相关推荐
- 前端性能优化学习 07 图片优化
图片优化 前端大部分的工作都围绕在 JavaScript 和 CSS 上,考虑如何更快地下载文件,如何提供给用户复杂而优雅的交互,如何高效合理地应用有限的处理和传输资源等,这些是用户感知的全部吗? 当 ...
- 【前端性能优化实践】手把手教你实现webpack图片压缩插件
前言 我想写一个系列:前端性能优化实践方案.网上虽然一搜一大把这样的文章,但大多缺乏体系化.也有很多讲性能优化的书籍,但其实想照着书上的知识进行实践,还是挺难的一件事. 这是该系列的第一篇文章 由于自 ...
- 前端性能优化:使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
- 前端性能优化:使用Data URI代替图片SRC
日期:2013-7-6 来源:GBin1.com 提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量.减少请求可以让你的网站加载更快,而其中一 ...
- 前端性能优化的重要方案:图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
- 深度讲解:web前端性能优化
一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
- 【Day11】平时在项目开发中都做过哪些前端性能优化
平时在项目开发中都做过哪些前端性能优化 一.体验优化 二.提升页面性能 三.首页加载优化(减少白屏时间) 一.体验优化 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提 ...
- Web前端性能优化,应该怎么做?
本文将分享一些前端性能优化的常用手段,包括减少请求次数.减小资源大小.各种缓存.预处理和长连接机制,以及代码方面的性能优化等方面. base64:尤其是在移动端,小图标可以base64(webpack ...
最新文章
- 在 ASP.NET 2.0 中上载文件 —— 解决文件大小限制
- luogu1514 [NOIp2010]引水入城 (bfs+记忆化搜索)
- 关于信任模型与交叉认证
- 简单说说:JavaSE、JavaEE、JavaME这三大体系
- Sass 基础(三)
- 哥斯拉Godzilla webshell管理工具
- 尺度不变性是指什么不变_不变性的来龙去脉
- Tableau Desktop
- 51Nod 1509加长棒
- CASS11.0.0.6安装以及教程
- ArcBlock 博客 | 区块链和数据库:致虚极,守静笃
- 使用ML.NET实现健康码识别
- 国际短信平台的收费标准是什么?
- python去除字符串中的单词_从字符串中删除特定单词的最有效方法
- Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑,附源码下载
- 文本溢出隐藏显示省略号失效
- 2022高性价蓝牙耳机排名,500元内真无线蓝牙耳机品牌推荐
- AgentWeb-Android-H5混合开发
- UC伯克利提出AIGC图像编辑新利器InstructPix2Pix,AI模型P图更加精细
- 【shell脚本开发技术】linux中shell script脚本开发编程常用命令与脚本速记指南