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

Question

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

我们正在处理包含在单个文件中的多个组件，稍后将使用 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 测试过，没问题。好像不会崩溃也许我没有遇到刷新调用？