灏天阁

前端性能实践总结-图片过大+视频加载缓慢

· Yin灏

背景

前端拿到的设计给的图片过大或者项目里本身需要展示的图片就比较多，特别现在网站往往流行的都是大图片大视频的情况下，那么多而大的图片和视频导致网页加载缓慢的问题，不靠后端，前端有哪些优化方案呢？

压缩图片

图片的话，可以选择无损压缩图片的方式，也就是压缩后不怎么影响用户观感和图片清晰度。

可使用TinyPng，不过是要收费的,具体可上网查看。

image.png

不过我这里使用的是一位掘友自己封装的一个插件，因为自己练习暂且试了试这位掘友的插件，不过平常中来真格的运用到项目中，就需使用官网的。这是这位掘友的文章：图片不压缩，前端要背锅 他的插件使用做法大概如下:

首先安装 yx-tiny 无损压缩。

npm i yx-tiny -D

image.png image.png

运行 npx tiny, 选择项目放图片的文件夹，然后再选择全量。就开始压缩了。

image.png 可以看到有 97 张图片可压缩，并且压缩成功。

image.png

image.png

压缩完成，可以看到体积从 48.7MB 缩减到 13.6MB，减少快 4 倍，压缩后的图片会覆盖之前的的图片，所以项目里之前引入的压缩前图片名路径什么的都不用改变。

image.png 压缩完成后，再次执行之前的操作会提示找不到可压缩的资源。   证明之前图片文件夹里面的图片已经全部压缩完成。

视频加载缓慢优化

当有很多大视频半天下载不出来时，有一种种法可以优化用户体验，利用 video 的一个自带的属性 poster，如下：

<video
  width="100%"
  height="100%"
  autoplay="{true}"
  loop
  muted
  playsinline="true"
  webkit-playsinline="true"
  x5-video-player-type="h5"
  poster="{mobile_aboutMimo_top}"
>
  <source src="{video_top}" type="video/mp4" />
  您的浏览器不支持视频。  
</video>

- Book Lists -