面试题：Vue懒加载组件如何优化性能以适应大型列表场景

优化思路

合理设置阈值：
- 思路：设置合适的距离阈值，当图片距离视口达到这个阈值时开始加载。如果阈值过小，图片加载过晚可能导致用户看到空白区域；阈值过大，会提前加载过多图片，增加不必要的网络请求。
- 例如，可设置为距离视口底部 200px 时加载图片。
图片预加载与缓存：
- 思路：在图片即将进入视口前，提前加载一定数量的图片，并且对已经加载过的图片进行缓存，避免重复请求。
- 可以使用一个缓存对象，以图片的 URL 作为键，加载后的图片资源作为值，每次加载图片前先检查缓存。
优化图片质量与尺寸：
- 思路：根据设备屏幕分辨率和视口大小，提供合适尺寸和质量的图片。对于高清屏幕，可以提供更高分辨率的图片；对于普通屏幕，使用较低分辨率的图片，同时适当调整图片质量，在保证视觉效果的前提下减小图片文件大小。
- 例如，使用现代图片格式（如 WebP），它通常在相同质量下比 JPEG、PNG 等格式文件更小。
防抖与节流：
- 思路：在滚动事件中，频繁触发懒加载判断会消耗性能。使用防抖或节流技术来控制触发频率。防抖是在一定时间内，多次触发事件只执行最后一次；节流是在一定时间间隔内，只允许触发一次事件。
- 比如，节流可以设置每 200ms 触发一次懒加载检查。
错误处理与重试：
- 思路：当图片加载失败时，给予适当的提示，并设置重试机制。避免因个别图片加载失败影响整个页面的展示。
- 可以在图片加载失败的回调函数中记录失败次数，达到一定次数后停止重试并给出友好提示。

代码实现

使用 vue - lazyload 插件（假设已安装）：
- 安装：npm install vue - lazyload
- 引入与配置：

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载比例，例如 1.3 表示在距离视口 1.3 倍高度时开始加载
  error: 'defaultErrorImage.jpg', // 加载失败显示的图片
  loading: 'defaultLoadingImage.jpg', // 加载中显示的图片
  attempt: 3, // 重试次数
  throttleWait: 200, // 节流等待时间，单位毫秒
  listenEvents: ['scroll'] // 监听的事件，默认为 scroll
});

在模板中使用：

<template>
  <div>
    <img v - lazy="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'yourImageUrl.jpg'
    };
  }
};
</script>

图片缓存（自定义实现）：

const imageCache = {};

function loadImage(url) {
  return new Promise((resolve, reject) => {
    if (imageCache[url]) {
      resolve(imageCache[url]);
      return;
    }
    const img = new Image();
    img.onload = () => {
      imageCache[url] = img;
      resolve(img);
    };
    img.onerror = reject;
    img.src = url;
  });
}

错误处理与重试（自定义实现）：

<template>
  <div>
    <img :src="imageSrc" @error="handleImageError" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'yourImageUrl.jpg',
      errorCount: 0
    };
  },
  methods: {
    handleImageError() {
      this.errorCount++;
      if (this.errorCount < 3) {
        // 重试
        this.imageSrc = `yourImageUrl${this.errorCount}.jpg`;
      } else {
        // 停止重试并显示提示
        this.imageSrc = 'errorImage.jpg';
      }
    }
  }
};
</script>

星途面试题库

面试题：Vue懒加载组件如何优化性能以适应大型列表场景

知识考点

面试题答案

优化思路

代码实现