面试题：如何在Vue组件中优化图片懒加载以处理大量图片

性能优化

图片尺寸优化：
- 在上传图片时，根据页面展示需求，对图片进行适当的压缩和尺寸调整。例如，如果图片在页面上展示宽度最大为300px，那么就将原始图片压缩并裁剪到合适尺寸，避免加载过大的图片造成带宽浪费和加载缓慢。
- 使用工具如ImageOptim（针对静态图片）、Compressor.js（可在前端处理）等进行图片压缩。
使用合适的图片格式：
- 对于色彩丰富的照片，优先使用JPEG格式。但对于具有透明度的图像，选择PNG格式。而对于一些简单的图标或图形，可考虑使用SVG格式，因为SVG是矢量图形，无论如何缩放都不会失真，且文件体积小。
- 对于现代浏览器支持的情况，可以使用WebP格式，它通常比JPEG和PNG有更好的压缩比，能显著减少文件大小。可通过服务器配置，根据浏览器支持情况返回不同格式的图片。
图片懒加载：
- 使用IntersectionObserver API：这是浏览器原生提供的用于异步观察目标元素与其祖先元素或顶级文档视口的交集变化情况的API。在Vue组件中，可以利用它来实现图片的懒加载。首先在组件的mounted钩子函数中创建IntersectionObserver实例，并在观察到图片进入视口时触发加载操作。
- 示例代码：

<template>
  <div>
    <img v-for="(image, index) in images" :key="index" :data-src="image.src" alt="image" ref="imageRefs">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {src: 'image1.jpg'},
        {src: 'image2.jpg'}
      ]
    };
  },
  mounted() {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    this.$refs.imageRefs.forEach(image => {
      observer.observe(image);
    });
  }
};
</script>

使用第三方库：如vue - lazyload，它简化了Vue项目中图片懒加载的实现。安装vue - lazyload后，在Vue项目入口文件（通常是main.js）中引入并使用：

import Vue from 'vue';
import VueLazyload from 'vue - lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'defaultErrorImage.jpg',
  loading: 'defaultLoadingImage.jpg',
  attempt: 1
});

然后在模板中，直接使用v - lazy指令代替src属性：

<template>
  <div>
    <img v - for="(image, index) in images" :key="index" v - lazy="image.src" alt="image">
  </div>
</template>

内存管理

及时释放未使用的图片资源：
- 当图片因为页面滚动或其他操作不再显示在视口内时，确保其相关资源能被及时释放。对于通过IntersectionObserver实现懒加载的情况，当图片离开视口后，可考虑将其src属性设置为空字符串，并移除IntersectionObserver对该图片的观察，以便浏览器回收相关资源。
- 在使用vue - lazyload时，它内部有一定的机制来管理图片的加载和卸载，但也可以根据实际情况，在组件销毁时，手动清理可能存在的未释放资源。例如，在组件的beforeDestroy钩子函数中，取消所有未完成的图片加载请求（如果有）。
避免内存泄漏：
- 确保在图片加载失败或其他异常情况下，不会导致内存泄漏。例如，在图片加载失败的回调中，要妥善处理，避免残留无效的引用。如果使用自定义的加载逻辑，在每次加载新图片前，检查是否有旧的图片加载操作未完成，并进行相应的清理。

加载策略

优先加载关键图片：
- 如果页面上的图片有重要程度之分，比如首屏图片、引导用户操作的图片等，优先加载这些关键图片。可以在组件的created或mounted钩子函数中，先对关键图片进行加载操作。例如，通过在数据中标记关键图片，然后在mounted钩子函数中先对这些图片执行加载逻辑。
- 示例：

<template>
  <div>
    <img v - for="(image, index) in images" :key="index" :data - src="image.src" alt="image" ref="imageRefs">
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {src: 'image1.jpg', isCritical: true},
        {src: 'image2.jpg'}
      ]
    };
  },
  mounted() {
    const criticalImages = this.images.filter(image => image.isCritical);
    criticalImages.forEach(image => {
      const img = new Image();
      img.src = image.src;
    });
    // 后续再执行普通图片的懒加载逻辑
  }
};
</script>

渐进式加载：
- 对于较大的图片，可以采用渐进式加载。渐进式JPEG图片在加载时，会先显示一个模糊的低质量版本，随着数据的不断接收，图片质量逐渐提高，最终显示完整清晰的图片。这种方式能让用户更快感知到图片的存在，提升用户体验。
- 要实现渐进式加载，通常在图片上传时，将其处理为渐进式JPEG格式（许多图片处理工具都支持此功能），然后在页面上直接使用该图片，浏览器会按照渐进式加载的方式进行显示。

星途面试题库

面试题：如何在Vue组件中优化图片懒加载以处理大量图片

知识考点

面试题答案

性能优化

内存管理

加载策略