vuejs 应用程序中无法检测到的内存泄漏

Question

我已经尝试解决这个问题一段时间了，我什至尝试重写整个程序但没有成功。该应用程序在 VueJS 2.3.3 上运行，并且应该结合 Raspberry Pi 在 Chromium 上运行（暂时不相关信息）。

我们正在处理包含在单个文件中的多个组件，稍后将使用gulp 或npm run dev 编译此文件。当VueJS 的实例初始化时，将使用Vue Resource 的$http 选项发送请求。这将收到一个大小约为30mb 的json 响应。这将保存在数据数组中，如下所示：

this.$http.get('<url>' + this.token)
    .then((response) => {
        this.properties = response.properties;
    });

这些数据稍后将用于进一步的操作，另一件值得一提的是数据每隔一段时间就会刷新一次。这就是我认为问题发生的地方，如果我不是每 5 分钟刷新一次数据（也可以更长，真的取决于我测试的方式），程序运行良好。只是我想每隔一段时间刷新一次数据以检索新信息。我正在使用的设置超时的方式如下：

this.dataTimeout = setTimeout(this.refreshData, 300000); 

每个（所谓的）property 至少有 6 个 base64 图像保存在它的 JSON 中，这些图像稍后用于呈现给用户。除此之外，还有名称、地址和其他一些微小的数据。听起来并没有那么错，但我感觉每个响应都会使内存变得如此密集，以至于即使是台式机也无法运行它。

每 10 秒，用户屏幕上会显示一个新的property，包括图像、街道、位置等。我不确定我的代码中是否存在内存泄漏或者我是否忘记了什么。我的脑海里突然冒出几个问题：

1. 我是否需要将我从服务器获得的响应重置回 null 或 undefined?
2. 我正在使用的插件之一（仅 VueResources）是否存在泄漏？
3. VueJS 实例可以存活多长时间，是否有建议的时间来重新加载整个程序？
4. 为了实现这一目标，我应该考虑什么？

我已经把数据更新拿出来放了一个demo项目上线，这个可以看here。我遇到的主要问题是浏览器内存不足，并向我们展示了来自 Chrome 的惊人的Aw snap! 页面。我尝试从内存使用情况中拍摄快照，但一切似乎都很好，只是在一段时间后随机爆炸。

提前致谢！

Answer 1

好吧，我不知道您的应用程序真正的用途是什么，但是您的 30Mb 数据真的有用/必不可少吗？还在 JSON 中？

也许您不需要所有这些数据，您可以根据需要调整数据。例如，保留您的 JSON 存储数据，并通过其他方式检索您的 Base64 图像。

我不明白您为什么将图像存储在内存中。在我看来，图像只是用于显示目的。

所以我认为 30Mb 真的很大。但也许我错了？

顺便说一句，我已经用 Firefox Nightly 进行了测试，这里没有问题。似乎没有崩溃。也许我没有遇到刷新调用？