从JS到WASM：构建高性能Web交易图表的核心架构与实践

, ），浏览器会维护这些对象的状态和层级关系。你只需要修改对象的属性，浏览器负责重绘。这对于文档类应用非常方便，但对于需要绘制成千上万个独立元素的场景（如图表），维护这个庞大的场景图本身就成了性能瓶颈。

API则工作在立即模式（Immediate Mode）下。Canvas本身只是一个像素画布，你通过调用绘图指令（如ctx.moveTo(), ctx.lineTo()）来直接操作像素。它不保留任何你绘制过的图形对象。这意味着每一帧你都需要重新绘制整个场景。虽然这增加了开发者的负担，但也给予了我们完全的控制权和极致的性能。对于交易图表这种元素众多但结构相对简单的场景，立即模式是最佳选择。

系统架构总览

基于以上原理，我们设计的这套高性能图表架构，其核心思想是“计算与渲染分离，状态与视图分离”。我们将CPU密集型的任务全部交给运行在Web Worker中的WASM模块处理，而主线程只负责响应用户交互并将最终的渲染指令绘制到Canvas上。

这幅架构图可以用以下几个核心组件来文字描述：

• UI主线程 (Main Thread):
  • 视图层 (View Layer): 包含Canvas元素，以及一些如图表工具栏、指标设置等外围UI组件（可由React/Vue等框架管理）。
  • 交互处理器 (Interaction Handler): 监听Canvas上的鼠标事件（拖拽、滚轮缩放、移动），将用户的意图（如Pan{dx: -10}, Zoom{factor: 1.1, anchor: [x,y]}）封装成消息。
  • 渲染循环 (Render Loop): 使用requestAnimationFrame驱动。它不进行任何计算，只等待从Worker线程传来的渲染数据（如顶点坐标、颜色等），然后调用Canvas API进行绘制。
  • 通信代理 (Worker Proxy): 负责与Web Worker进行通信，通过postMessage发送用户操作指令，并通过onmessage接收渲染数据。
• Web Worker 线程 (Worker Thread):
  • WASM核心模块 (WASM Core): 这是我们用Rust或C++编写并编译成的.wasm文件。它承载了整个图表应用的所有“业务逻辑”和“大脑”。
  • 状态管理器 (State Manager): 在WASM的线性内存中维护图表的完整状态，包括所有的K线数据、技术指标参数、当前可视区域（Viewport）等。

  – 数据处理器 (Data Processor): 负责接收WebSocket推送的实时tick数据或通过API获取的历史K线，并将其高效地存入WASM内部的数据结构中。

  • 计算引擎 (Calculation Engine): 执行所有重度计算，如根据当前可视区域和缩放级别，计算需要绘制的K线坐标、所有技术指标的曲线坐标等。
  • 通信监听器 (Message Listener): 监听从主线程发来的消息，调用WASM核心模块的相应函数来更新状态和触发重新计算。
• 数据源 (Data Source):
  • WebSocket Server: 用于实时推送最新的成交价或K线更新。
  • REST API Server: 用于按需拉取历史K线数据。

整个工作流程是：用户在UI主线程进行操作 -> 交互处理器将操作转换成指令发送给Worker -> Worker中的WASM核心模块更新状态、重新计算 -> 计算结果（渲染数据）通过零拷贝的ArrayBuffer传回主线程 -> 主线程的渲染循环根据这些数据在Canvas上绘制新的一帧。这个流程确保了主线程永远不会被计算阻塞，从而保证了UI的流畅性。

核心模块设计与实现

在这里，我们切换到极客工程师的视角，用Rust作为示例来展示WASM核心模块的关键实现。我们将使用wasm-bindgen库来简化JS与Rust之间的交互。

1. 状态管理与数据结构 (Rust)

首先，定义核心的数据结构。关键在于使用能够映射到连续内存的类型。

use wasm_bindgen::prelude::*;

// 代表一根K线
#[wasm_bindgen]
#[derive(Clone, Copy, Debug)]
pub struct Candle {
    pub timestamp: i64,
    pub open: f64,
    pub high: f64,
    pub low: f64,
    pub close: f64,
    pub volume: f64,
}

// 图表的核心状态
#[wasm_bindgen]
pub struct ChartCore {
    candles: Vec<Candle>,
    // 其他状态，例如指标、视图窗口等
    // viewport_start_index: usize,
    // viewport_end_index: usize,
    // ...
}

#[wasm_bindgen]
impl ChartCore {
    #[wasm_bindgen(constructor)]
    pub fn new() -> ChartCore {
        ChartCore {
            candles: Vec::new(),
        }
    }

    // 从JS接收历史数据。注意这里我们直接接收一个类型化的数组
    // JS侧需要传入 Float64Array，效率远高于JSON解析
    pub fn set_historical_data(&mut self, data: &js_sys::Float64Array) {
        let mut candles_data = Vec::new();
        // data is a flat array [ts1, o1, h1, l1, c1, v1, ts2, o2, ...]
        let raw_vec: Vec<f64> = data.to_vec();
        for chunk in raw_vec.chunks_exact(6) {
            candles_data.push(Candle {
                timestamp: chunk[0] as i64,
                open:      chunk[1],
                high:      chunk[2],
                low:       chunk[3],
                close:     chunk[4],
                volume:    chunk[5],
            });
        }
        self.candles = candles_data;
    }
    
    // ... 其他方法
}

极客坑点： 数据传递是JS与WASM交互的第一性能陷阱。绝对不要使用JSON。JSON.stringify和JSON.parse在处理百万级数据点时会消耗数百毫秒甚至数秒。正确的方式是将数据在JS端整理成Float64Array或Uint8Array，然后直接将Buffer的引用传递给WASM。wasm-bindgen可以很好地处理这个过程，几乎是零开销。

2. 高性能计算引擎 (Rust)

以计算一个简单的5周期移动平均线（SMA）为例，展示在WASM中进行计算的简洁与高效。

// 在 ChartCore impl 中

impl ChartCore {

    // 这个函数不直接返回数据给JS，而是计算并存储在内部

    // 渲染函数会读取计算结果

    pub fn calculate_sma(&self, period: usize) -> Vec<f64> {

        if self.candles.len() < period {

            return Vec::new();

        }

        let closes: Vec<f64> = self.candles.iter().map(|c| c.close).collect();

        let mut sma_values = vec
延伸阅读与相关资源


    想系统性规划股票、期货、外汇或数字币等多资产的交易系统建设，可以参考我们的

    交易系统整体解决方案。
  

    如果你正在评估撮合引擎、风控系统、清结算、账户体系等模块的落地方式，可以浏览

    产品与服务

    中关于交易系统搭建与定制开发的介绍。
  

    需要针对现有架构做评估、重构或从零规划，可以通过

    联系我们

    和架构顾问沟通细节，获取定制化的技术方案建议。