面试题：Vue Teleport在大型单页应用性能优化中的实践

Question

在一个大型的单页应用（SPA）中，有多个模态框组件使用了Vue Teleport将内容挂载到body下。随着项目的迭代，发现页面性能有所下降。请分析可能导致性能下降的原因，并阐述如何利用Vue Teleport的特性进行性能优化，给出具体的优化思路和代码示例。

Answer 1

性能下降原因分析

1. DOM 渲染数量增加：多个模态框通过 Teleport 挂载到 body 下，使得 body 节点下 DOM 元素增多，浏览器渲染压力增大，特别是在频繁显示和隐藏模态框时，会触发重排和重绘。
2. 事件代理和冒泡：模态框挂载到 body 下后，事件传播路径可能发生变化，可能会导致不必要的事件冒泡，使得事件处理逻辑变得复杂，增加了性能开销。
3. 资源加载和管理：如果模态框中有大量的资源（如图片、脚本等），每次显示模态框都可能触发资源的重新加载或计算，影响性能。

性能优化思路

1. 延迟挂载：在需要显示模态框时才通过 Teleport 挂载到 body，而不是一开始就挂载。
2. 事件优化：合理使用事件修饰符，避免不必要的事件冒泡和代理。
3. 资源管理：对于模态框中的资源，采用合适的加载策略，如懒加载等。

代码示例

1. 延迟挂载
   • 在 Vue 组件中，使用 v-if 结合 Teleport 实现延迟挂载。

<template>
  <div>
    <button @click="showModal = true">显示模态框</button>
    <template v-if="showModal">
      <Teleport to="body">
        <div class="modal">
          <p>这是一个模态框</p>
          <button @click="showModal = false">关闭</button>
        </div>
      </Teleport>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
}
</style>

2. 事件优化
   • 在模态框按钮上使用 @click.stop 修饰符，防止事件冒泡到 body。

<template>
  <Teleport to="body">
    <div class="modal">
      <p>这是一个模态框</p>
      <button @click.stop="closeModal">关闭</button>
    </div>
  </Teleport>
</template>

<script>
export default {
  methods: {
    closeModal() {
      // 关闭模态框逻辑
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
}
</style>

3. 资源管理（以图片懒加载为例）
   • 使用 IntersectionObserver 实现模态框内图片的懒加载。

<template>
  <Teleport to="body">
    <div class="modal">
      <img v-lazy="imageUrl" alt="示例图片">
      <button @click="closeModal">关闭</button>
    </div>
  </Teleport>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    closeModal() {
      // 关闭模态框逻辑
    }
  }
}

// 自定义指令实现懒加载
Vue.directive('lazy', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value;
          observer.unobserve(el);
        }
      });
    });
    observer.observe(el);
  }
});
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
}
</style>