requestAnimationFrame を使うとジワジワとヒープが増えていく

requestAnimationFrame.md

function tick() {
    requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

上記のコードをしばらく走らせた状態で、Chrome DevTools のプロファイラでリソース(ヒープメモリ)の様子がどうなっているか調べてみました。

このような最小限のコードでも、Chrome ではヒープメモリがジワジワと増えていき、ある程度までいくとGCが実行されてしまうようです。

開発終盤でこのような現象に気づいてしまうと、「あれ…どこでメモリリークしているんだろう?」と疑心暗鬼になってしまいますが、そういうわけでもないようです。
元々こういうものなのでしょうか。

もしかして cancelAnimationFrame が足りない?

cancelAnimationFrame を毎回呼べばヒープを喰わないのでは? と考えやってみましたが改善しませんでした。むしろ API の呼び出し回数が増えるので、これは無しですね。

var id = 0;
function tick() {
    cancelAnimationFrame(id);
    id = requestAnimationFrame(tick);
}
id = requestAnimationFrame(tick);

アニメーションに関係する API を呼び続けるだけで定期的に GC が走ってしまうようだと、PCは良いのですがモバイルブラウザではアニメーションの品質に影響がでてしまう可能性があります。

なんか、よろしくないような気がします。

Chromium のバグトラッカーに issue があります:
Empty RequestAnimationFrame loop creates garbage

二年近く前のコメントなので現在も当てはまるか分かりませんが、#20 によると DevTools Timeline 自身が JS heap を使うのと、rAF が呼ばれるたびにオブジェクトが生成されるのが原因のようです。