前端使用 Konva 实现可视化设计器（20）- 性能优化、UI 美化

这一章主要分享一下使用 Konva 遇到的性能优化问题，并且介绍一下 UI 美化的思路。

至少有 2 位小伙伴积极反馈，发现本示例有明显的性能问题，一是内存溢出问题，二是卡顿的问题，在这里感谢大家的提醒。

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

性能优化

内存溢出

根据官方文档 Konva Class: Node 的说明：

remove(): remove a node from parent, but don’t destroy. You can reuse the node later.
destroy(): remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
If the node is a container (Group, Stage or Layer) it will destroy all children too.

在本示例之前的版本中，只使用 remove() 是不正确的，只使用 remove，每次 redraw 都产生巨量的实例没有被清除，也就是内存溢出了，导致 JS heap size 随随便便干到几个 GB。

【简单判断内存溢出】
前往：Chrome -> Console 面板 -> 左侧更多 -> Performance monitor -> JS heap size
如果内存只升不降，基本可以认为内存溢出了。

在本示例中，大部分图形实例都是用完即弃的，所以大部分的 remove 都替换为 destory 后，JS heap size 将基本维持在几十上百 MB（根据内容复杂度）。

这里提个醒，除了使用 remove 的时候要注意，还有个容易忽略的 API 要注意，就是 Stage、Layer、Group 的 removeChildren()，如果子节点不再有用，建议先遍历子节点分别 destroy 一下。

初始状态，如下：

卡顿

在本示例之前的版本中，只要画面需要变化，都是重新 redraw 所有图形，这导致加载的素材过多的时候，交互会产生明显的卡顿，尤其是加载 gif 的时候，每一帧都会 redraw 一次。

因此，redraw 必须是可以选择性 draw 每一层 layer 的，主要调整如下：

// 重绘（可选择）
  redraw(drawNames?: string[]) {
   
    const all = [
      Draws.BgDraw.name, // 更新背景
      Draws.LinkDraw.name, // 更新连线