关键在于交互逻辑与动画渲染彻底分离，通过RepaintBoundary隔离重绘、isolate处理异步任务、Shadow DOM实现样式隔离，并辅以帧率监控与动态降级策略保障性能。
关键在于把交互逻辑和动画渲染彻底分开，让用户操作不被异步任务拖慢。层隔离不是加一层 wrapper 就完事，而是从调度、渲染、资源三方面做硬性切割。
用 RepaintBoundary 切出独立重绘层
在 Flutter 中，把频繁变化的动画区域（比如粒子特效、进度波纹）用 RepaintBoundary 包裹，强制它生成独立图层。这样即使该区域每帧都在重绘，也不会触发父级 Widget 的 layout 或 build。配合 const 构造函数缓存静态部分，能避免无谓重建。
- 不要嵌套太多 RepaintBoundary——每多一层图层，GPU 合成开销就增加一点
- 对纯 Canvas 绘制的动画，建议额外加 PictureRecorder 预录帧，减少每帧重复绘制路径
- 滚动列表里嵌入这类特效时，记得用 AutomaticKeepAliveClientMixin 保活，避免滑出视口再回来时重初始化
把异步特效调度到专用 isolate 或队列
重度异步特效（如实时滤镜计算、物理模拟、Lottie 帧解码）不能跑在 UI 线程。Flutter 推荐用 compute() 或自定义 Isolate 处理耗时逻辑，结果通过 Stream 或 ValueNotifier 回传。
- 避免在 isolate 中操作 Widget 或上下文；只处理数据，渲染仍由主 UI 层完成
- 对连续帧输出（如每秒30次坐标更新），用 throttle 或 debounce 控制回传频率，防止 UI 线程被消息洪流淹没
- 参考 GPUImage 的设计：为视频特效分配专用串行队列，QoS 设为 QOS_CLASS_USER_INITIATED，确保响应优先级
样式与 DOM 渲染层物理隔离（Web 场景）
在 Bilibili-Evolved 这类 Web 扩展中，“层隔离”更多体现为 Shadow DOM + 样式注入控制。自定义顶栏、弹幕、动态面板等异步加载模块，全部挂载进独立 shadowRoot，并通过 CSSStyleSheet.replace() 动态管理样式表。
- 禁止跨 shadowRoot 的 CSS 全局选择器（如 *、body），否则会触发全量重排
- 用 MutationObserver 监听关键节点变更，而非轮询或监听 document，降低 CPU 占用
- 非可视区组件（如折叠侧边栏）启用 lazy-panel.ts 的延迟加载，进入视口前不执行任何 JS 初始化
帧率兜底：动态降级与资源熔断
即使做了隔离，极端场景（如低端机+4K 视频+10个 Lottie 同时播放）仍可能跌破 60fps。此时需主动干预：
- 监听 WidgetsBinding.instance.onFrameCallback，持续统计帧耗时；连续3帧 >16ms，自动关闭非核心特效（如粒子数量减半、Lottie 跳帧）
- 对 WebGL 或 Canvas2D 渲染，检测 context.lost 或帧丢弃信号，立即切换至 SVG 或 CSS 动画降级路径
- Bilibili-Evolved 的 component-trace.ts 和 promise-trace.ts 可实时上报组件加载与 Promise 链耗时，用于服务端动态下发轻量版资源
