Vue.jsでcssスタイルの値を時間経過で変更しつづけた際のメモリリークに対処したい

Question

前提・実現したいこと

JavaScriptのメモリリークについて悩んでいます。
Vue.js（v2.5.17）を使用しています。
cssスタイルの値を時間経過で変更しつづけるコードを書きました。

Google Chromeのタスク マネージャで確認したところ、
「JavaScript メモリ」欄の値が増え続けてしまいます。

調べてはみましたが、対処法がわからず質問させていただきます。
まず、本当にメモリリークしているかどうかの段階から、いまいち自信がないです。。
わかる方いらっしゃいましたら、ご教授いただけませんでしょうか。

該当のソースコード

<div id="app">
    <div v-bind:style="innerStyle">
        <article>テスト</article>
    </div>
</div>

new Vue({
    el: '#app',
    data: {
        num:0,
    },
    methods: {
        next: function(){
            self = this;
            self.num++;
            setTimeout(function(){
                self.next();
            },1000);
        }
    },
    computed: {
        innerStyle: function () {
            return {'margin-left': this.num + "%"}
        },
    },
    mounted: function () {
        this.next();
    }
})		

Answer 1

setTimeout に指定する時間を 1000 ミリ秒から 1ミリ秒に変更したうえで30分程動作させてみましたが、JavaScriptメモリは4.2Mbyte, タブの占有メモリも 10Mbyte 程度から上がる気配がありません。

コードを見ても、私の存じ上げる範囲でメモリリークの発生するような記述はないように思います。

察するに、質問者様が見たメモリの増加はブラウザが高速化のために消費しているメモリの類ではないでしょうか。

デベロッパーツールで何度かメモリのスナップショットをとっても、compiled code の項目が開始後数十秒かけて 1M 程度から 1.6M 程度まで伸び続けるようです。

どうしても心配なら、ページを開いたまま数日ほったらかした後、改めて占有メモリを確認してみるとよいと思います。

Comments

[inukichi]

ご回答ありがとうございます!
なるほど、そういうことでしたか。
メモリの増加はある程度いくと止まるという事であれば安心です。

ひとまず、ページを開いたまま放置しながら何時間おきに確認してみます。

[inukichi]

5時間ほど確認してみた結果、開始数分で1.6M程度まで伸びると、そこから上がりませんでした。
3時間後にはガベージコレクションされたのか、1Mまで下がっているのも確認できました。

不安の種を取り除いていただき、ありがとうございました。