面试题：Vue 应用中如何优化与后端 API 的交互性能

可能存在的性能瓶颈

频繁请求：过多的 API 请求会增加网络开销，特别是在网络环境不佳时，会导致响应时间延长。例如，在一个页面中多次重复请求相同数据。
数据量过大：后端返回的数据量过多，前端解析和处理这些数据耗费大量时间和内存，影响页面渲染速度。
请求等待：一些请求之间存在依赖关系，必须等待前一个请求完成才能发起下一个，导致整体等待时间变长。
缓存缺失：没有合理利用缓存，每次请求都从后端获取最新数据，增加后端负载和网络传输时间。

前端优化策略

缓存策略
- 本地缓存：利用 localStorage 或 sessionStorage 存储不经常变化的数据。例如用户基本信息、配置信息等。在每次请求前，先检查缓存中是否有需要的数据，若有则直接使用，减少对后端的请求。示例代码：

// 读取缓存
const cachedData = localStorage.getItem('userInfo');
if (cachedData) {
  const userInfo = JSON.parse(cachedData);
  // 使用缓存数据
} else {
  // 发起 API 请求获取数据
  // 假设使用 axios 库
  axios.get('/api/userInfo')
   .then(response => {
      const userInfo = response.data;
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      // 使用获取到的数据
    });
}

- **内存缓存**：在 Vue 组件内使用变量缓存数据。适用于组件内多次使用且不希望频繁请求的数据。例如，在一个列表组件中，首次获取列表数据后缓存起来，当组件重新渲染需要数据时优先从内存中获取。

export default {
  data() {
    return {
      cachedList: null
    };
  },
  methods: {
    async getList() {
      if (this.cachedList) {
        return this.cachedList;
      }
      const response = await axios.get('/api/list');
      this.cachedList = response.data;
      return this.cachedList;
    }
  }
}

请求合并
- 手动合并：对于一些可以合并的请求，在前端进行合并处理。比如，一个页面需要获取用户信息和用户设置这两个数据，后端分别提供了 /api/userInfo 和 /api/userSettings 接口。可以在前端发起一个新的请求，将这两个接口的数据一起获取。示例代码：

axios.all([
  axios.get('/api/userInfo'),
  axios.get('/api/userSettings')
]).then(axios.spread((userInfoRes, userSettingsRes) => {
  const userInfo = userInfoRes.data;
  const userSettings = userSettingsRes.data;
  // 处理数据
}));

- **利用工具库**：如 `lodash` 的 `debounce` 和 `throttle` 函数来合并频繁触发的请求。例如，在搜索框输入时，可能会频繁触发搜索请求，使用 `debounce` 函数可以设置一个延迟时间，在延迟时间内如果再次触发请求，则取消前一个未完成的请求，只执行最后一次请求。

import _ from 'lodash';

export default {
  data() {
    return {
      searchText: ''
    };
  },
  created() {
    this.debouncedSearch = _.debounce(this.search, 300);
  },
  methods: {
    search() {
      axios.get(`/api/search?q=${this.searchText}`)
       .then(response => {
          // 处理搜索结果
        });
    },
    onInput() {
      this.debouncedSearch();
    }
  },
  beforeDestroy() {
    this.debouncedSearch.cancel();
  }
}

异步处理
- Promise.all：当有多个并行的异步请求且需要等待所有请求完成后再进行下一步操作时，使用 Promise.all。例如，页面需要同时获取多个图表的数据，每个图表数据由不同的 API 提供。

const chartPromises = [
  axios.get('/api/chart1Data'),
  axios.get('/api/chart2Data'),
  axios.get('/api/chart3Data')
];

Promise.all(chartPromises)
 .then(responses => {
    const chart1Data = responses[0].data;
    const chart2Data = responses[1].data;
    const chart3Data = responses[2].data;
    // 使用数据渲染图表
  });

- **async/await**：在 Vue 组件的方法中使用 `async/await` 使异步操作看起来更像同步代码，提高代码可读性，同时也方便处理多个异步请求的顺序或并行关系。

export default {
  methods: {
    async fetchData() {
      try {
        const userInfoRes = await axios.get('/api/userInfo');
        const userOrdersRes = await axios.get('/api/userOrders');
        const userInfo = userInfoRes.data;
        const userOrders = userOrdersRes.data;
        // 处理数据
      } catch (error) {
        console.error('请求出错', error);
      }
    }
  }
}

优化数据传输
- 减少不必要字段：与后端协商，只返回前端需要的数据字段，避免传输大量无用数据。例如，后端返回的用户对象包含很多前端不需要的系统内部字段，可让后端只返回前端展示和业务逻辑需要的字段。
- 数据压缩：在网络传输过程中，使用 gzip 等压缩算法对数据进行压缩，减少数据传输量。大多数现代 Web 服务器和浏览器都支持 gzip 压缩，前端无需额外操作，只需要确保后端开启 gzip 压缩功能即可。

面试题：Vue 应用中如何优化与后端 API 的交互性能

知识考点

面试题答案

可能存在的性能瓶颈

前端优化策略