前端性能优化之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="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 绝对是不可忽视的性能优化点。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 前端性能优化可以从以下几个方面入手: 1. 代码优化:使用合适的数据绑定方式,避免不必要的计算和渲染。合理使用计算属性、watcher 和 v-if/v-show 等指令,避免频繁的重新渲染。同时,注意避免在模板中使用复杂的表达式和函数调用。 2. 组件拆分和懒加载:将大型组件拆分成更小的组件,按需加载。这样可以降低首次加载时的资源压力,提高页面初始化速度。使用 Vue 的异步组件和路由懒加载功能,可以在需要时再去加载组件。 3. 图片优化:使用合适的图片格式和压缩工具来减小图片大小,提高加载速度。可以使用工具将图片转为 WebP 格式,并通过 CDN 加速图片加载。 4. 路由优化:使用懒加载和异步组件,减少首次加载时需要加载的资源。合理使用路由懒加载,按需加载所需的组件。 5. 数据请求优化:减少不必要的接口请求,合并接口请求,避免频繁的网络请求。合理使用缓存和本地存储,减少对服务器的依赖。 6. 代码分割和打包优化:使用工具将代码按需分割成多个文件,利用浏览器的并行加载能力,加快页面加载速度。对打包后的资源进行压缩和混淆,减小文件大小。 7. 使用虚拟列表和无限滚动:对于大量数据的展示,可以使用虚拟列表或者无限滚动技术,只渲染可见区域的数据,提高列表性能。 8. 优化重绘和回流:避免频繁的 DOM 操作和样式改变,合理使用 CSS transform 和 opacity 等属性来减少重绘和回流。将频繁改变的元素设置为 fixed 或 absolute 定位,可以避免重新布局。 以上是一些常见的 Vue 前端性能优化的方法,根据具体项目的需求和实际情况,可以选择适合的优化方案来提高页面性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值