Question

我只是想重新启动网站上的画布。我不想重新加载页面，因此必须动态完成重启。问题：几次重启后，动画变慢，内存增加。

实际上我面临一个更复杂的情况：我使用javascript框架加载页面，MeteorJS使用IronRouter。更改URL只会更改DOM（删除节点），但“＆＃39;页面会更改”并没有真正离开。所以我认为回到我的页面与画布可以同化为动态画布重启，因为我也没有解决方案。

这就是我从两个角度描述问题的原因（两者都有同样的问题）：

首先是一个简单的页面，其中一个按钮要求画布重新启动
然后将解决方案应用于使用IronRouter的MeteorJS，并尝试多次返回我的页面。

注意：我的画布内容是一些WebGL（在ThreeJS中）。

的 1。动态删除和重新初始化画布。

在这种情况下，我面临这两个问题：

动画不顺畅
内存增加。确切地说：

Memory use http://img15.hostingpics.net/pics/263473issue.png 1.页面加载，玩帆布/ 2.重新启动画布30-40次（我没有停止重启，所以我不知道为什么增加不是线性的）/ 3.使用画布/ 4.关闭标签（重新加载）该页面只释放了动员的一小部分）

关于SO的几个问题尚未询问如何解决这些问题，但复制解决方案部分解决了这个问题。我读过两件主要的事情：

必须从DOM中清除与画布相关的部分（节点，变量，函数）（这是Meteor所做的。但在第一部分中它保持相关性，但还不足以防止这些问题）。
如果调用了requestAnimationFrame，则需要将其分配给变量，以便cancelAnimationFrame(variable)可以阻止它。这确实似乎可以防止帧率下降。虽然记忆力很高，但至少动作仍然流畅。

通过这些解决方案，内存问题仍然存在。

以下是一个示例：http://codepen.io/Astrak/pen/RNYLxd

的 2。在MeteorJS中：我无法使这个部分解决方案有效。

以下是我在我的应用中写的内容，id=requestAnimationFrame(myAnimation)声明为globaly：

 Template.myTemplate.destroyed=function(){
      cancelAnimationFrame(id);
      document.body.removeChild(document.querySelector('canvas'));//useful in Meteor ?
 };

尽管有这些说明，我的动画使用MeteorJS比前一个例子慢得多：它在3-4页改变后变得无法使用。同样的记忆问题。

感谢您的每一条评论和回答以及快乐的编码：）

相关问题：

Performance drop on multiple restart of scene from threejs

Performance drops when trying to reset whole scene with Three.js

How do we handle webgl context lost event in Three.js

Pause, Resume and Restart Canvas Animations with JS

How can I restart my function?

JavaScript restart canvas script