一、 场景痛点：网页在工业平板上“卡成 PPT”

上周，我们协助一家做纺织机械的客户优化他们的新一代 HMI 系统。

• 硬件环境：15.6 寸工业安卓平板，搭载 RK3568 (4GB RAM)，运行 Chromium 内核浏览器。

• 业务场景：单屏幕展示 2000 个纱锭的实时转速和张力状态。

• 事故现场：开发团队使用 Vue 3 + v-for 生成了 2000 个

  或

• CPU 占用率 100%。

• 动画帧率仅 8 FPS。

• 操作延迟超过 1 秒，工人点击“急停”按钮后，屏幕 1 秒后才有反应，被判定为重大安全隐患。

在低功耗 ARM 芯片上，操作几千个 DOM 节点的重排（Reflow）和重绘（Repaint）是不可接受的。对于密集型 SCADA 界面，Canvas（画布） 是唯一的出路。

二、 架构设计：Canvas 分层渲染策略

不要试图用一个

1. 静态背景层 (Layer 0)：绘制工厂底图、设备边框、管道线条。这些元素不会动，画一次并缓存起来 (Cache)。

2. 动态数据层 (Layer 1)：绘制数值、状态指示灯、液位动画。只有这一层需要 RequestAnimationFrame 循环重绘。

3. 交互层 (Layer 2)：处理鼠标悬停、点击事件的幽灵层。

技术选型：

• Konva.js：相比原生的 Context2D API，它提供了高性能的对象模型，且支持离屏渲染。

• Web Worker：将 WebSocket 数据解析（JSON Parse）放到子线程，避免阻塞 UI 主线程。

三、 核心实施步骤 (Copy & Paste)

我们将使用 Konva.js 在 Vue 3 中实现一个高性能的状态点阵。

1. 初始化分层画布 (Vue Component)

   {
  const stage = new Konva.Stage({
    container: 'container',
    width: 1920,
    height: 1080,
  });

  // 层级 1: 静态背景 (只渲染一次)
  const bgLayer = new Konva.Layer({ listening: false }); // 关闭事件监听，提升性能
  // ... 画几千个方框 ...
  bgLayer.cache(); // 关键：缓存为位图！
  stage.add(bgLayer);

  // 层级 2: 动态数据 (高频刷新)
  const dataLayer = new Konva.Layer();
  stage.add(dataLayer);
  
  // 将 layer 暴露给更新函数
  window.updateDataLayer = (newData) => {
      // 批量更新逻辑
  };
});" _ue_custom_node_="true">

2. 批量更新与 Batch Draw

不要收到一个数据就 draw() 一次。要利用 batchDraw() 或 requestAnimationFrame 合并渲染周期。

// 假设这是 socket 接收到的 2000 个点的状态数组
socket.on('message', (msg) => {
    const points = JSON.parse(msg);
    
    // 遍历 Konva 形状进行属性更新 (比操作 DOM 快 100 倍)
    points.forEach((p) => {
        // 通过 id 快速找到对应的 Shape
        const shape = dataLayer.findOne('#node-' + p.id); 
        if (shape) {
            shape.fill(p.status === 1 ? 'green' : 'red');
        }
    });

    // 关键：一帧内只重绘受影响的层，不动背景层
    dataLayer.batchDraw(); 
});

3. 解决 Retina 屏模糊问题

工业平板很多是 1080P 甚至 2K 屏。Canvas 在高分屏上默认会模糊。

Konva 自动处理了 pixelRatio，但如果你的图片资源模糊，需要手动设置：

Konva.pixelRatio = window.devicePixelRatio || 1; // 强制开启高清渲染

四、 踩坑复盘 (Red Flags)

1. 内存泄漏 (The Memory Leak)

• 现象：HMI 运行 3 天后，浏览器崩溃（OOM）。

• 原因：Vue 组件销毁时，没有销毁 Konva 的 Stage。

• 对策：

  codeJavaScriptonUnmounted(() => { stage.destroy(); // 必须显式调用，解绑所有事件监听});

2. 事件风暴

• 现象：给 2000 个圆点每个都绑定 click 事件，初始化耗时 3 秒。

• 对策：事件委托 (Event Delegation)。只在 Stage 或 Layer 上绑定一个点击事件，通过 e.target 判断点到了哪个图形。

3. RK3568 的 GPU 兼容性

• 现象：启用 WebGL (Three.js) 后反而比 2D Canvas 卡。

• 原因：Linux 下的 Chromium 浏览器对某些国产 GPU（如 Mali G52）的硬件加速驱动支持不完善，导致 WebGL 软解。

• 对策：对于 2D SCADA，优先使用 Context2D (Konva/Pixi.js)，比 WebGL 更稳妥。

五、 关联资源与选型

要跑得动这种高性能 Web 页面，硬件不能太拉跨，但也不用太贵。

• 推荐硬件：

• 视美泰/研华 RK3568 工业平板：4GB 内存是底线。2GB 内存跑 Chrome 内核 + 复杂 Canvas 很容易崩溃。

  
  

替代方案：

• 如果 Web 实在优化不动，可以考虑用 Qt for WebAssembly 或者直接切回 Qt 原生开发。

  
  

拿来主义

我们封装了一个 "Vue3 + Konva SCADA 基础框架"。

包含：自动缩放适配、图层管理器、WebSocket 数据节流器 (Throttle)。