核心是“解耦渲染”：SSE仅推送配置数据（如粒子密度、视差强度），CSS视差通过--scroll-y变量和transform实现，粒子系统用Canvas快照+requestAnimationFrame动态重绘，三者通过响应式状态松耦合，避免DOM操作阻塞渲染。
用SSE推送实时数据驱动CSS视差滚动+粒子动画，核心不是“联动”，而是“解耦渲染”：SSE只负责更新数据状态，视差和粒子由CSS/JS独立控制，靠数据触发重绘或位移偏移。
1. SSE只做数据管道，不直接操作DOM
避免在onmessage里频繁修改元素样式——这会阻塞渲染、破坏视差层级。正确做法是把接收到的数据存入响应式状态（如useState或ref），再让粒子系统监听该状态变化：
- 用
EventSource建立长连接，接收JSON格式的动态参数（如粒子密度、主色、偏移强度） - 把关键数值（如
parallaxSpeed: 0.3、particleCount: 120）存在ref中，不触发重渲染 - 粒子Canvas或GSAP动画通过
requestAnimationFrame读取最新ref值，动态调整运动逻辑
2. CSS视差滚动用transform隔离层级，不依赖SSE
视差效果本质是不同层以不同速率滚动，与SSE无关。用纯CSS实现更稳定：
- 给背景层设
transform: translateY(calc(var(--scroll-y) * 0.2))，前景层用* 0.8 - 用
IntersectionObserver或scroll事件实时更新--scroll-yCSS变量（非SSE） - SSE仅用于切换预设视差配置（如“暴雨模式”→
--parallax-multiplier: 1.5），而非逐帧计算
3. 粒子系统用Canvas + 数据快照，避免实时重绘
每秒几十次SSE消息若直接重绘粒子，GPU会过载。应采用“快照驱动”策略：
立即学习“Java免费学习笔记（深入）”；
- 初始化时用Canvas批量生成粒子（位置/大小/透明度随机），存为数组
- SSE来新数据时，只更新粒子系统的控制参数（如
velocityScale、hueShift），不新增/删减粒子 - 动画循环中用
ctx.clearRect()清空后，按当前参数重绘所有粒子（利用GPU缓存） - 示例：收到
{"color": "#ff6b6b", "density": 80}→ 调整现有粒子色调，过滤掉20%低透明度粒子（非删除，改alpha=0）
4. 关键性能守则
大屏场景下，浏览器主线程必须轻量：
- 禁止在SSE回调中调用
document.querySelector或getBoundingClientRect - 所有CSS变量变更用
document.documentElement.style.setProperty()，避免重排 - 粒子数量超过200时，启用
will-change: transform提升图层，但仅对顶层容器设置 - 用
Web Workers处理SSE数据校验和插值（如平滑过渡新旧density值），不占用渲染线程
不复杂但容易忽略：SSE和视差/粒子是三个独立模块，靠状态变量松耦合。推的是“配置”，动的是“渲染”，中间没有直接调用链。
