前端数据可视化框架选型指南：React/Vue/Svelte深度评测
提示词描述：
专为前端架构师与高级开发者设计的可视化技术选型提示词。通过深度对比 React、Vue、Svelte 在海量数据渲染下的底层机制与性能表现，结合具体业务场景给出最优框架组合与 Web Worker 优化方案，输出包含性能指标与代码骨架的专业评测报告。
提示语关键词：
前端性能优化, React渲染原理, Vue响应式, 数据可视化选型, 前端架构设计, Svelte编译时, 大屏开发技术栈
提示词内容：
【需求分析】
针对 {具体业务场景，如：实时金融K线图/大屏数据看板}，分析海量数据渲染时的性能瓶颈。重点评估 DOM 节点数量激增导致的重排重绘开销、JavaScript 主线程阻塞引起的掉帧，以及长时间运行下的内存泄漏风险。明确 {目标数据量级，如：十万级散点/千级节点} 下的 60FPS 渲染底线要求及交互延迟容忍度。
【方法对比】
深度对比三大主流框架在极端数据渲染下的底层机制：
1. React：基于 Fiber 架构的时间切片与并发模式，虚拟 DOM Diff 算法在海量更新时的计算开销，以及 useTransition 对渲染优先级的控制。
2. Vue：基于 Proxy 的细粒度响应式追踪，在深层嵌套对象更新时的依赖收集成本，以及 watchEffect 的批处理机制对主线程的占用。
3. Svelte：编译时 AST 转换，无虚拟 DOM 的指令式更新，在构建产物体积和初始执行速度上的绝对优势，但缺乏运行时复杂状态管理的局限。
【推荐方案】
基于 {团队现有技术栈与开发周期}，推荐最优框架组合。若追求极致性能与包体积，推荐 Svelte + Canvas/WebGL 方案；若需复杂交互与生态，推荐 React + 虚拟列表/Canvas 降级方案。明确核心可视化库（如 D3.js, ECharts, 或 Three.js）的集成策略及 Web Worker 多线程数据清洗方案。
【使用步骤】
1. 构建基准测试用例，模拟 {真实数据流特征，如：高频WebSocket推送}。
2. 分别编写各框架的渲染逻辑与状态更新代码。
3. 使用 Chrome Performance API 与 Memory 面板采集 FPS、JS Heap 及 GC 频率。
4. 输出包含性能指标雷达图与最终代码骨架的技术选型报告。
【效果展示】
预期输出包含各框架在 {指定数据量} 下的 FPS 曲线对比图、内存快照分析、V8 引擎垃圾回收触发频率，以及经过性能调优后的核心组件源码和架构设计文档。