Fabric.js 目前对于对象的缓存策略是如何让性能得到提升的呢

2023-03-29 15:34:34 +08:00
 coldmonkeybit

最近在用 Fabric.js 做一些需求,读了一下文档和源码,发现他们正在使用一种缓存策略。

大概就是为每一个对象都创建一个 cacheCanvas DOM (在启用缓存的前提下),然后每次对于对象的操作都只会在这个 cacheCanvas DOM 里面生效,然后再通过 drawImage 画到真正的 canvas 里面。

不太明白的一点是,相对于直接将对象画到 canvas 里面,启用了缓存策略不是反而多了一步吗,就是先操作 cacheCavnas DOM ,完了然后还要 drawImage 到 canvas 。
为什么这两步操作反而比直接画在 canvas 上性能要更好?

求大佬们答疑,感谢。

698 次点击
所在节点    问与答
2 条回复
kamilic
2023-03-29 23:13:21 +08:00
离屏绘制?实时绘制的话要走浏览器的渲染流程呀,但是如果离屏就是纯粹数据层面的操作,我理解就是个缓冲之类的结构,可以等到真正需要绘制的时候才一次性计算和输出。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#pre-render_similar_primitives_or_repeating_objects_on_an_offscreen_canvas
coldmonkeybit
2023-03-30 09:38:44 +08:00
@kamilic 很有帮助,感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/928176

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX