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

Question

现在有两种方式，

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

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

Answer 1

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

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

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

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

Answer 2

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