面试题：Vue mounted阶段复杂初始化操作下的性能优化

异步操作并行化

对于多个异步数据请求，可以使用Promise.all将它们并行处理。例如，如果有三个异步请求request1、request2、request3：

mounted() {
  const request1 = axios.get('/api/data1');
  const request2 = axios.get('/api/data2');
  const request3 = axios.get('/api/data3');
  Promise.all([request1, request2, request3]).then(([res1, res2, res3]) => {
    // 处理响应数据
  }).catch(error => {
    // 处理错误
  });
}

这样可以利用HTTP/2的多路复用特性，提高请求效率，而不是依次等待每个请求完成。

防抖与节流

如果组件中有频繁触发的DOM操作（比如窗口大小改变等事件相关的DOM操作），可以使用防抖或节流技术。
防抖：例如，在窗口大小改变时重新计算布局，但不希望每次像素变化都执行复杂操作。

methods: {
  debounce(func, delay) {
    let timer;
    return function() {
      const context = this;
      const args = arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    };
  },
  handleResize() {
    // 复杂的DOM操作
  }
},
mounted() {
  window.addEventListener('resize', this.debounce(this.handleResize, 300));
}

节流：如果某个操作需要频繁触发，但又不能过于频繁，可以限制一定时间内只执行一次。比如滚动条滚动事件：

methods: {
  throttle(func, limit) {
    let inThrottle;
    return function() {
      const context = this;
      const args = arguments;
      if (!inThrottle) {
        func.apply(context, args);
        inThrottle = true;
        setTimeout(() => inThrottle = false, limit);
      }
    };
  },
  handleScroll() {
    // DOM操作
  }
},
mounted() {
  window.addEventListener('scroll', this.throttle(this.handleScroll, 200));
}

延迟加载与按需加载

延迟加载：对于一些非关键的第三方插件初始化，可以延迟到组件渲染完成后一段时间再执行。例如，使用setTimeout延迟初始化某个图表插件：

mounted() {
  setTimeout(() => {
    // 初始化第三方图表插件
    new Chartist.Line('.ct-chart', {
      labels: [1, 2, 3, 4, 5],
      series: [[1, 2, 3, 4, 5]]
    });
  }, 1000);
}

按需加载：如果某些数据或功能在组件初始渲染时不是必须的，可以使用动态导入（在Vue中可以使用import()语法）。例如，某个子组件只有在用户点击按钮后才需要显示，那么可以这样实现按需加载：

<template>
  <div>
    <button @click="showComponent">显示组件</button>
    <component :is="componentToShow" v-if="componentToShow"></component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      componentToShow: null
    };
  },
  methods: {
    async showComponent() {
      const { default: LazyComponent } = await import('./LazyComponent.vue');
      this.componentToShow = LazyComponent;
    }
  }
};
</script>

虚拟DOM与批量更新
- Vue本身基于虚拟DOM，在进行DOM操作时会自动进行优化。但在一些手动操作DOM的场景下，可以利用虚拟DOM的思想。例如，对于多次修改同一DOM元素的属性，可以先在内存中构建一个虚拟的DOM结构，然后一次性更新到真实DOM上。
- 在Vue中，$nextTick可以用于批量更新。比如，需要在更新数据后立即执行一些依赖于更新后DOM状态的操作：
```
mounted() {
  this.$data.message = '新消息';
  this.$nextTick(() => {
    // 这里可以操作更新后的DOM
    const element = document.querySelector('.message - container');
    // 进行DOM操作
  });
}
```
优化第三方插件
- 检查第三方插件是否有可优化的配置。例如，某些图表插件可能在初始化时加载了大量不必要的数据或功能，可以根据实际需求精简配置。
- 查看是否有轻量级的替代插件，在满足项目功能需求的前提下，选择性能更好的插件。
服务器端渲染（SSR）或静态站点生成（SSG）
- SSR：如果整个项目适合服务器端渲染，可以将组件的初始化操作部分移到服务器端执行。这样在客户端接收的是已经渲染好的HTML，减少了客户端的初始化工作量，提高了页面加载速度。例如，使用Nuxt.js（基于Vue的SSR框架）可以很方便地实现SSR。
- SSG：对于一些内容相对固定的页面，可以使用静态站点生成。在构建阶段生成HTML文件，用户访问时直接加载静态文件，极大地提高加载速度。例如，使用VuePress（适合文档类网站的静态站点生成器）可以实现这种方式。

星途面试题库

面试题：Vue mounted阶段复杂初始化操作下的性能优化

知识考点

面试题答案