前端探索图片加载优化的最划算实践

Posted 2022-02-01 luciozhang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端探索图片加载优化的最划算实践相关的知识，希望对你有一定的参考价值。

图片优化是最划算的工作

图片加载的优化，是前端性能优化中，最划算的一项工作，往往工作量和难度都不大，但却能给页面性能带来极大极大的提升。

同一个页面，优化前和优化后，能明显体验出来天翻地覆的变化，性能数据上的提升也十分好看。

分析下怎么优化

但图片优化的方法那么多，我们应该从哪里入手呢？

管理学上一个叫做鱼骨图的东西，解决一个大的问题，我们可以从多个小的问题入手，每个小的问题，又可以进一步的细分，一层层细分下去，问题足够小了，我们就能找到具体的解决方法。

借鉴鱼骨图的思考方法，我们可以画出，图片优化的思维导图，当然，这里只列举了图片加载优化的一小部分功能，更多的优化手段，还请大家自行补充。

下面，我们不会跟着这个思维导图，把所有的优化手段都讲一遍，这样文章会有点长，哈哈我们的题目也是标题党了，但是认真看下去，相信你还是会有收获的。

我们将基于vue-lazyload这个第三方库，对这个第三方库进行扩展，看看这个库，除了懒加载之外，还能用来实现什么优化。

图片体积优化

这里先简单说一下，在前端页面之外，对图片的体积进行优化，这块是最简单的，但往往是效果最佳的一步。

如果我们拿到的设计的切图，我们可以用tinypng或者智图，对图片进行尺寸修改和压缩。

如果是有一个管理端给外部上传图片，我们可以在图片上传前，对图片进行压缩，压缩图片的库可以选择Compressor.js。

图片懒加载

vue-lazyload是目前用的比较多的一个库，单纯使用懒加载的功能，代码很简单，只需要在入口文件引入和使用，它还提供了更多的配置项可以按需选择。

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, 
  preLoad: 1.3,
  attempt: 1
)

除了懒加载，vue-lazyload还提供了一些钩子，方便在图片显示前，对图片进行处理，下面我们基于vue-lazyload的filter，看看能做哪些优化。

首先是官网的示例：

Vue.use(vueLazy, 
    filter: 
      progressive (listener, options)  // 在loading时，用一张小图片实现渐进式加载
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) 
              listener.el.setAttribute('lazy-progressive', 'true')
              listener.loading = listener.src + '?imageView2/1/w/10/h/10'
          
      ,
      webp (listener, options)  // 对支持webp的改成webp图片链接
          if (!options.supportWebp) return
          const isCDN = /qiniudn.com/
          if (isCDN.test(listener.src)) 
              listener.src += '?imageView2/2/format/webp'
          
      
    
)

除了官网的示例，我们还可以扩展其他的优化点。

CDN链接

我们可以对支持CDN的图片域名，直接改成CDN域名，这样就不用逐个检查是否用了cdn链接了。

filter: 
    // 转换为cdn
    cdn(listener) 
    	if (isSupportCDN(listener.src)) 
    		listener.src = getCdnUrl(listener.src);
  		
    ,
,

同理，有些接口可能返回了http的图片链接，在安卓端https的页面，可能会加载不到图片，也可以用这种方式修改链接。

腾讯云图片处理优化体积

这里使用腾讯云图片处理接口，来优化图片体积。

首先是图片格式转换和质量变换，由于质量变换接口支持jpg但是没支持png，我们一般把图片转换为jpg图片，再对质量适当减小。

除了质量的变换，我们还可以根据dom的大小，只请求合适大小的图片，这用到了腾讯云的图片缩放接口。

 filter: 
    // 缩放压缩
    compress(listener) 
      if(supportCompress(listener.src))
        	// 获取img的框高，设置加载两倍图
          const imageWidth = listener.el.width * 2;
        	const imageHeight = listener.el.height * 2;
        	const url = listener.src;
        	// 只对较大尺寸的图片，做质量压缩
          if (width > 150 || height > 150)  
            url = `$url?imageMogr2/format/yjpeg/quality/80/thumbnail/!$width||''x$height||''r`;
           else if (width > 0 || height > 0) 
            url = `$url?imageMogr2/thumbnail/!$width||''x$height||''r`;
          
        	listener.src = url;
      
    ,
  ,