Tailwind CSS drop-shadow类致Vue应用FPS暴跌，寻求解决方案

近期排查应用FPS大幅下降问题耗时颇多：应用运行一段时间后性能骤降，FPS跌至约10帧。经定位，移除@apply指令中的drop-shadow-md类即可解决该问题。

相关代码示例 #

自定义组件样式（SCSS） #

@layer components {
    .standard-card {
        @apply rounded-md drop-shadow-md bg-surface-content-light dark:bg-surface-content-dark
    }
    /* 其他类 */
}

Vue循环渲染代码 #

<div v-for="chart in ltCharts" :key="chart" class="standard-card flex flex-col gap-2"> ...内容... </div>

已知阴影相关样式会给CPU带来较大负载，动态渲染组件时负载还会进一步增加，而场景中大部分使用standard-card类的组件都是通过v-for循环渲染的，求可行解决方案。

技术栈 #

• Vue - 3.2.45
• PrimeVue - 3.29.2
• PrimeIcons - 6.0.1
• Vite - 4.3.9
• TailwindCSS - 3.3.2

Tailwind配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {...}
}

解决方案建议 #

1. 用box-shadow替代drop-shadow #

Tailwind的drop-shadow-md基于CSS filter: drop-shadow()实现，性能开销远大于box-shadow。改用Tailwind自带的shadow-md类（对应原生box-shadow），只要卡片是无透明区域的矩形，视觉效果几乎一致，但CPU负载会显著降低：

@layer components {
    .standard-card {
        @apply rounded-md shadow-md bg-surface-content-light dark:bg-surface-content-dark
    }
}

2. 开启GPU硬件加速 #

为卡片添加触发GPU加速的属性，把阴影渲染工作转移到GPU，减轻CPU压力：

@layer components {
    .standard-card {
        @apply rounded-md shadow-md bg-surface-content-light dark:bg-surface-content-dark;
        transform: translateZ(0);
        will-change: box-shadow;
    }
}

3. 优化组件渲染逻辑 #

• 修正v-for的key：不要直接用对象作为key，改用对象的唯一标识（比如chart.id），避免Vue频繁销毁重建组件引发不必要的阴影重绘。
• 虚拟滚动：如果ltCharts数据量较大，用PrimeVue的VirtualScroller组件，只渲染可视区域内的卡片，减少同时存在的阴影数量。

4. 缓存静态组件 #

如果卡片内容不常变化，用Vue的v-memo缓存组件，减少阴影的重绘次数：

<div v-for="chart in ltCharts" :key="chart.id" v-memo="[chart.id]" class="standard-card flex flex-col gap-2"> ...内容... </div>

5. 降低阴影复杂度 #

自定义更轻量化的阴影配置，在视觉效果可接受的前提下减少性能开销：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'light-card': '0 2px 4px rgba(0,0,0,0.05)',
      },
    },
  },
}

然后替换组件中的阴影类：

@layer components {
    .standard-card {
        @apply rounded-md shadow-light-card bg-surface-content-light dark:bg-surface-content-dark
    }
}

内容的提问来源于stack exchange，提问作者dymek662