前端性能优化

Superxpang2025-10-10 23:49

本篇主要讲述element-plus中使用Tooltip单例模式，实现的性能优化。

效果：实现渲染优化3秒-2秒（优化33%）

javascript 复制代码

<template>
  <div>
    <el-button
      v-for="i in 3"
      :key="i"
      @mouseover="(e) => (buttonRef = e.currentTarget)"
      @click="visible = !visible"
      >Click to open tooltip</el-button
    >
  </div>

  <el-tooltip
    ref="tooltipRef"
    :visible="visible"
    :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }"
    :virtual-ref="buttonRef"
    virtual-triggering
    popper-class="singleton-tooltip"
  >
    <template #content>
      <span> Some content </span>
    </template>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const buttonRef = ref()
const tooltipRef = ref()

const visible = ref(false)
</script>

<style>
.singleton-tooltip {
  transition: transform 0.3s var(--el-transition-function-fast-bezier);
}
</style>

以上述代码（element-plus官方代码）为例，此实现的是，在一个button上面增加tooltip文字描述，如果存在很多button时，最原始的操作是，在每个button上面都增加一个tooltip，目前这种实现方式是将tooltip单拎出来，使所有的button只挂在一个tooltip。

在DOM渲染时，就只加载一个tooltip即可，最终用户看到的效果是一致的！