应直接使用 tsparticles-engine 而非手写 Canvas 粒子系统，因其稳定、可配、不卡顿；需限制粒子数（60–120）、禁用拖尾与悬停交互、设 fpsLimit 为 30，并避免 WebGL 以保障兼容性。
直接用 tsparticles-engine，别手写 Canvas 粒子系统——仪表盘要的是稳定、可配、不卡顿，不是炫技时的帧率峰值。
为什么不用原生 Canvas 写粒子背景？
仪表盘页面通常已有大量 DOM 更新、图表渲染（如 ECharts）、WebSocket 数据流，再塞进一个每帧遍历 300+ 粒子的 requestAnimationFrame 循环，容易触发主线程争抢，尤其在低端设备上掉帧明显。原生实现还要自己处理：窗口 resize 重置画布尺寸、鼠标交互防抖、粒子生命周期管理、内存泄漏（没 clearTimeout 或 cancelAnimationFrame）——这些在仪表盘这种长期驻留页面里全是隐患。
tsparticles-engine 怎么嵌进 React/Vue 仪表盘？
它对主流框架支持极好，且默认启用性能优化（如粒子池复用、canvas 自动缩放裁剪）。关键不是“怎么装”，而是“怎么配得不抢资源”：
-
tsparticles-engine+@tsparticles/react（React）或@tsparticles/vue（Vue 3）是官方推荐组合，避免直接操作 DOM - 禁用非必要交互：把
interactivity.detectsOn设为"window"而非"canvas"，防止鼠标移入 canvas 区域时触发高开销的 proximity 计算 - 限制粒子数：
particles.number.value设为60–120（非 500），仪表盘重点是数据，不是粒子密度 - 关闭动画拖尾：
particles.move.trail.enable = false，否则每个粒子会累积绘制历史路径，GPU 内存涨得快
示例配置片段（React）：
立即学习“前端免费学习笔记（深入）”；
const options = {
particles: {
number: { value: 80 },
move: { trail: { enable: false } },
},
interactivity: {
detectsOn: "window",
events: { onHover: { enable: false } }, // 关闭悬停响应
}
};
Canvas 粒子和 WebGL 粒子在仪表盘里怎么选？
别碰 WebGL。仪表盘常见部署环境（内网 IE11 兼容模式、国产信创浏览器、老旧政企终端）对 WebGLRenderingContext 支持极差。tsparticles-engine 默认 fallback 到 2D Canvas，且做了兼容性兜底；而自己用 Three.js 或自研 WebGL 粒子，等于主动放弃一批真实用户。
真正要注意的是 Canvas 渲染模式本身：
- 如果仪表盘有深色主题 + 半透明图表层，粒子颜色用
hsl(220, 30%, 70%)这类低饱和浅色，避免白色粒子在深色背景上“过曝”干扰数据阅读 - 禁用
particles.shape.type = "image"—— 加载外部图标会触发额外 HTTP 请求，破坏仪表盘首屏加载稳定性 - 把
fpsLimit显式设为30（而非默认60），省下的 CPU 时间留给 ECharts 的实时重绘
粒子特效在仪表盘里从来不是主角，它的存在感应该像空调声——你意识到它在，但不会被它打断思路。配错一个 opacity 或多开一个 onHover 回调，就可能让运维大屏在凌晨三点突然卡住。稳，比酷重要得多。
