我目前正在使用 Konva.js 在多个堆叠的 FastLayer 上平铺许多 PNG 图像。 PNG 包含不透明度，并且不需要拖动或点击框。瓷砖经常更换，这似乎适用于尺寸约为 30x30 的中型网格。一旦图 block 开始增长到大约 100x100，甚至 60x60，替换单个图 block 时性能开始下降。
我已经开始研究“分块”图 block ，即将图 block 添加到更小的 FastLayer 组中。例如，一个 100x100 的 FastLayer 将被分成几个 10x10 的 FastLayer。当单个图 block 发生变化时，我们的想法是只有那个 block 应该重新渲染，理想情况下可以加快整体渲染时间。
这是一个值得尝试的好设计，还是我应该尝试不同的方法？我查看了 Konva.js 文档中的性能提示，但没有看到任何与此案例直接相关的内容。
最佳答案
因此，经过一些研究和修改，我发现了渲染约 4000 张图像的最快方法。
- 不要为 Konva.js 使用 React 组件。我使用 React 构建我的应用程序，但我跳过了使用中间库进行 Konva.js 渲染。在 Canvas 上使用 React Components 会使你的性能减半。
- 缓存常用图像。我使用简单的 LRU 缓存来重用 HTMLImageElement 对象。
- 尽可能重复使用 Konva.js 节点 (Konva.Image)。我的实现是渲染图像网格。位置不会改变，但图像可能会改变。之前，我会 destroy() 一个节点，然后添加另一个节点。 destroy() 会导致额外的渲染，这会为您的用户造成卡顿。相反，我只是将 image() 方法与 id() 和 name() 结合使用，以在网格坐标处查找和替换图像。
- 我的应用允许用户在网格上绘制长笔画。当仅使用文字鼠标事件时，这在小笔画中工作正常。对于长行程，这不起作用有两个原因。首先，操作系统和浏览器会限制鼠标事件，给你间歇性的鼠标事件。其次，处于渲染中间会产生相同的副作用。相反，该软件现在会检测长笔划，并“填充”用户打算在间歇性鼠标事件之间绘制的缺失坐标。
- 每隔一段时间渲染一次。由于我的网格经常变化，我决定每秒对网格信息进行 24 次采样，而不是让每个图 block 变化都排队 batchDraw()。底层实现是使用 RxJS 每 42 毫秒轮询一次 Redux 存储，并且仅在发生更改时才对 batchDraw() 进行排队。
关于javascript - 为许多图像优化 Konva.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42729872/