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

小蚊酱
  • 4.8k

现在有两种方式,

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

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

回复
阅读 1.5k
2 个回答
✓ 已被采纳

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

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

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

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

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

宣传栏