在HTML5中在主动画循环之外创建新对象是一个好习惯吗？

Question

在HTML5中，我们通常使用requestAnimationFrame为形状或对象设置动画。但是，在动画函数之外创建这些形状和对象是一种好习惯吗？

说我有一个功能

function animate() {
  renderA();
  renderB();
  requestAnimateionFrame(animate);
}

我在animate()之外的预分配数组定义为：

let arr = new Array(99999);
let currentIndex = 4999;

假设arr的实际长度为5000，数组的其余部分为undefined。

现在我想在数组中插入一些新对象，我可以将animate函数更改为此吗？

function animate() {
  renderA();
  let length = 100;
  for (let i = 0; i < length; i++) {
      arr[currentIndex + 1 + i] = new SomeObject({...});
  }
  currentIndex += length;
  renderB();
  requestAnimateionFrame(animate);
}

如果我在这个例子中没记错的话，在画布动画期间会多次调用animate函数。所以，如果我在这个animate()函数中创建一个新对象，然后再渲染它，资源最终会耗尽？在动画循环中创建新对象是否可以？