画布重画卡住（性能问题）

Question

我将为Raspi-Project创建一个GUI。在Raspi3上运行的是Nodejs，后者运行一个NodeJs-Server，然后通过Chromium以信息亭模式请求它。

此GUI的一页需要可视化48个电位器，12个按钮，8个推子的状态。 NodeJs-Server通过websocket将数据（由用户修改）发送到客户端，客户端重新绘制整个画布。到目前为止，对于某些元素，效果还不错：

works fine but with a slight delay if you look closer

现在问题是，尽管需要绘制的元素数量越来越多，但性能却下降到了无法接受的延迟时间。

works, but with a way too big dalay, as more elements are drawn

那些甚至都不是需要绘制的东西的一半。

我现在很困惑，因为在决定采用这种方式之前，我已经了解了画布的速度，如果我停用所有画布绘制并只是console.log()通过websocket传入的数据，像实时一样快。

那我在做什么错呢？也许最好不要在每次值更改时都绘制整个画布，而是为画布设置动画？也许有人对此有经验？

Here is the code ..当您查看assets/js/menu.class.js时，这是生成画布的文件。每次值更改时，都会通过websocket调用函数createControllerGUI(options)。

Answer 1

画布很快，但是仍然占用大量CPU。速度也会随着平台的变化而改变。

您的函数每次更改都会执行所有绘图操作。这些操作具有笔触，填充，居中对齐的文本以及其他内容（我并没有查看全部细节）。

有一些方法可以优化绘图操作。

部分重画

可能是最有效的。 跟踪小部件的位置，跟踪消息之间的数据变化，并仅绘制差异。 在小部件占用的区域上使用clearRect并重新绘制它。请勿触摸其他像素。 除非章鱼使用了该硬件，否则每帧最多可以更改2或3个小部件。

一次中风。

您可以一次跟踪所有需要的路径，而不必在每个窗口小部件上进行描边，而在更改窗口小部件时使用moveTo到新位置，并在循环结束时使用一次笔触操作即可。

缓存

例如，如果有一些旋转控件，则可以在单独的小画布上绘制一次，如果需要表示旋转控件，则可以将该画布用作要以不同角度绘制的源图像。 DrawImage通常通过硬件操作进行优化，而单个填充和描边可能没有。

可能还有其他方法，您可以查看可以为您执行此操作的高级库，从而公开小部件逻辑而不是低级绘制操作。