图形缓存性能优化技巧
如果您有一个包含大量绘图操作的复杂图形,或者您正在应用滤镜,可以通过缓存该图形来提升性能。当您缓存图形时,Konva 会将其绘制到内部画布缓冲区中。此后,Konva 无需每次重新绘制图形,而是直接使用缓存版本。
图形缓存在以下场景特别适用:
- 包含大量绘制操作的复杂图形
- 带滤镜的图形
- 不会频繁修改,但需要被频繁重绘的图形
只需要调用 cache() 成员方法,你就能缓存图形。你也可以通过 clearCache() 清除缓存。
缓存机制是如何工作的?
当你调用一个图形实例上的 cache() 方法是,Konva 将执行:
- 创建一个内部的 canvas 缓冲区
- 将图形绘制到该缓冲区
- 存储该缓存区数据,以备后续使用
缓存后,当需要显示图形时,Konva 无需每次都重新绘制,而是直接使用缓冲区中的缓存版本。这比重复绘制图形要高效得多。
使用指南
- 不要将不带滤镜的简单图形进行缓存。直接渲染往往比使用缓存更快;
- 每个缓存的节点都会创建多个画布缓冲区。因此请勿过度使用此功能,否则将消耗大量内存。
- 相较于单独缓存每个图形,更推荐缓存图形组。
- 请务必在启用和禁用缓存两种情况下都进行性能测量,以观察实际差异。
下面的例子展示了复杂图形在使用缓存和不使用缓存情况下的性能差异:
使用说明:
- 点击 stage 的任意位置会添加 1000 个圆形
- 点击复选框会在 启用/禁用 缓存间切换
- 观察 FPS 数值,可以看出性能差异
- 该圆形组合会持续旋转