canvas中requestAnimationFrame绘制红包雨的性能?

发布于 09-12 13:49 字数 176 浏览 36 评论 0

现在有两种方式,

  1. 每次创建一个红包时,都自带一个requestAnimationFrame来绘制它自己的新位置;canvas中可能同时会存在7、8个红包;
  2. 主方法控制一个requestAnimation,每次把存在的红包都循环绘制一次;

想请问下,这两种方式的性能上有区别吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

风筝有风,海豚有海2022-09-19 13:49:27

两种方式 每个红包在 requestAnimation 的时候都会绘制一遍,这个部分没有差异

方法一 每个红包 都有一次 requestAnimation 调用开销
方法二 所有红包 只有一次 requestAnimation 调用开销

实际上你也就 7,8个红包。。。这点调用开销是感受不出来的

关于 requestAnimation 的推荐做法是,只有一个。。。并且都在这个一个里做绘制(就是方法二)

剩一世无双2022-09-19 13:49:27

比较推荐使用一个rAF,如果你担心你计算8个红包会有性能问题,那么这个性能问题是js层面的,也就是你写的代码有问题,增加rAF的数量也避免不了,而且会带来更大的开销,毕竟rAF内部维护的逻辑,肯定要比你计算红包的位置来的复杂。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文