hero区域粒子背景必须限制作用域、控制密度、绑定容器尺寸，否则滚动错位或卡顿；需设hero为relative定位，canvas绝对定位并用getBoundingClientRect动态适配宽高，禁用tsparticles全屏模式，桌面端粒子≤150个、移动端≤60个且关闭连线，透明度≥0.7。
为什么不能直接复用全屏粒子代码
全屏粒子通常监听 window.innerWidth / window.innerHeight，而 hero 区域是固定高度的 DOM 容器（比如 <section class="hero">），强行用窗口尺寸会导致：
- 粒子溢出 hero 区域，在其他区块上乱飘
- 响应式缩放时 canvas 宽高不随容器重绘，出现拉伸或留白
- 滚动时 canvas 未设
position: absolute或z-index，被内容遮盖或压住文字
如何绑定 canvas 到 hero 容器
关键不是“画粒子”，而是“让 canvas 精确贴合容器”。步骤如下：
- 给 hero 容器加
position: relative（作为 canvas 的定位上下文） - canvas 插入 hero 内部最顶层，设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - JS 中不再读
window.innerWidth，改用heroEl.getBoundingClientRect()获取实时宽高 - 每次
resize或scroll（如果 hero 是 sticky 或视差）后，调用canvas.width = rect.width和canvas.height = rect.height
示例片段：
const hero = document.querySelector('.hero');
const canvas = hero.querySelector('canvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
const rect = hero.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
tsparticles 配置要关掉 autoSize
如果你用 tsparticles（推荐），默认会接管整个 body 尺寸。必须显式禁用自动适配，并指定目标容器：
立即学习“前端免费学习笔记（深入）”；
- 删掉
fullScreen: { enable: true }（它默认就是 true） - 加上
detectRetina: false（避免高清屏下 canvas 被双倍放大导致模糊） -
interactivity.detect_on改成"canvas"，而不是"window" - 初始化时传入容器元素：
tsParticles.load("hero-particles", options)，并在 HTML 中确保<div id="hero-particles"></div>在 hero 内部
粒子密度和性能的临界点
hero 区域常见高度是 60vh ~ 90vh，宽度常为 100vw。按这个尺寸，安全粒子数上限是：
- 桌面端（非 Retina）：≤ 150 个粒子（再高 requestAnimationFrame 开始掉帧）
- 移动端（尤其 iOS Safari）：≤ 60 个，且必须关闭连线（
links.enable: false） - 所有设备都建议把
move.speed控制在0.2 ~ 0.8，超过 1.0 就容易产生“撕裂感”
真正容易被忽略的是：粒子颜色透明度要 ≥ 0.7。低于这个值，大量半透粒子叠加会触发浏览器合成层频繁切换，比粒子数本身更耗性能。
