最近在用 Fabric.js 做一些需求,读了一下文档和源码,发现他们正在使用一种缓存策略。
大概就是为每一个对象都创建一个 cacheCanvas DOM (在启用缓存的前提下),然后每次对于对象的操作都只会在这个 cacheCanvas DOM 里面生效,然后再通过 drawImage 画到真正的 canvas 里面。
不太明白的一点是,相对于直接将对象画到 canvas 里面,启用了缓存策略不是反而多了一步吗,就是先操作 cacheCavnas DOM ,完了然后还要 drawImage 到 canvas 。
为什么这两步操作反而比直接画在 canvas 上性能要更好?
求大佬们答疑,感谢。
1
kamilic 2023-03-29 23:13:21 +08:00 via iPhone 1
离屏绘制?实时绘制的话要走浏览器的渲染流程呀,但是如果离屏就是纯粹数据层面的操作,我理解就是个缓冲之类的结构,可以等到真正需要绘制的时候才一次性计算和输出。
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 |
2
coldmonkeybit OP @kamilic 很有帮助,感谢
|