WebSocket用于股市实时行情需封装连接管理、心跳保活与自动重连；用requestAnimationFrame实现价格平滑跳动动画；K线图增量绘制避免全量重绘；CSS动态类反馈市场状态，形成数据驱动的闭环交互。
WebSocket 是 HTML5 提供的全双工通信协议，特别适合股市这类需要低延迟、高频率数据更新的场景。关键不在于“动画有多炫”，而在于如何把实时行情（如价格跳动、涨跌色变、K线增量绘制）与 WebSocket 的消息流稳定、可维护地衔接起来。
建立可靠 WebSocket 连接并处理行情数据流
不要直接用 new WebSocket() 后硬编码所有逻辑。先封装连接管理，自动重连、错误降级（如退到轮询）、心跳保活：
- 使用
onopen确认连接后立即发送订阅请求（例如 JSON 格式：{"type":"subscribe","symbols":["AAPL","TSLA"]}） - 在
onmessage中解析二进制或 JSON 行情数据（注意：真实行情服务常返回压缩后的二进制帧，需用response.arrayBuffer()解析） - 对每条 tick 数据（含时间戳、最新价、成交量、买卖盘）做轻量归一化处理，统一为 JavaScript 可用对象，再派发给动画模块
用 requestAnimationFrame 驱动平滑价格动画
避免用 setInterval 或 setTimeout 更新 DOM——它无法匹配屏幕刷新率，易卡顿。价格跳动动画应基于帧循环：
- 监听 WebSocket 收到的新价格，只记录“目标值”和“起始值”，不直接改 DOM
- 启动
requestAnimationFrame循环，在每一帧中按 easing 函数（如t => t * t）插值计算当前显示价格，实时更新元素文本 - 当新 tick 到达时，中断当前动画，以新价格为起点重新开始插值（实现“无缝追价”）
增量绘制 K 线图，避免重绘整张画布
K 线图不是静态图片，而是随 tick 持续生长的图形。用 Canvas 实现时重点在“只画新增部分”：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 维护一个本地 K 线数组，按秒/分钟聚合 tick（例如：每 60 秒生成一根新 K 线）
- 每次新 K 线生成后，仅调用
ctx.fillRect()、ctx.moveTo()/lineTo()绘制该根 K 线及其影线，不调用clearRect()清空全画布 - 用
ctx.save()/ctx.restore()控制坐标系缩放和平移，支持平滑滚动查看历史，而非重绘全部
用 CSS 自定义状态反馈，提升交互感知
动画不只是“动”，更是让用户感知市场情绪。结合 WebSocket 数据动态切换 CSS 类：
- 价格涨 → 添加
price-up类，配合transition: color 0.2s ease-in实现绿色渐显 - 触发涨停/跌停 → 添加
limit-hit类，用@keyframes pulse做轻微呼吸闪烁（非刺眼抖动） - 成交量突增 → 对对应 K 线柱添加
volume-spike类，临时加粗边框或叠加半透明高亮层
核心是把 WebSocket 当作数据管道，把动画当作状态响应器。数据驱动视图，视图变化又可反向触发操作（如点击某支股票自动订阅/取消），形成闭环。不复杂但容易忽略细节。
