时间戳

首页 > 解决方案 > 使用 Object.freeze 和 object.unfreeze 减少具有大量表数据行的反应性页面中的内存膨胀

javascript - 使用 Object.freeze 和 object.unfreeze 减少具有大量表数据行的反应性页面中的内存膨胀

问题描述

我正在使用此处给出的方法来减少具有大量表/行数据的 Vue.js 应用程序的内存膨胀。我们看到内存膨胀，尤其是在 IE 中。前任。加载页面时，有几行的页面可以跳转〜100MB。

我发现如果我冻​​结进入我们存储行数据的列表/数组中的每个对象，膨胀会显着下降。100MB -> 60MB

对于我们在多个页面上有大量表数据的 Vue.js 应用程序，这是减少内存膨胀的最佳解决方案吗？我注意到，如果没有发生冻结，IE 可以在点击 2-3 页并进行 1-3 次搜索后将内存跳转到 ~1GB，每次搜索会产生 50 行数据！每次我们进行搜索时，我都会尝试清除数组，以便垃圾收集器和清理，但它确实没有太大影响。

此外，当我们在数据表行中有需要即时更改的列（例如日期或名称）时，我应该 1. 解冻对象 2. 进行更改 3. 再次冻结 4. 将其推回数组

使用类似这个包的东西

标签： javascripthtmlvue.jsvuexvuetify.js

解决方案

这可能有点晚了，但您也可以在可变变量 ( let) 中创建一个对象，并在需要重置它时将原始对象重新分配给该变量。

例如： 

let obj = { objProp: "example" };

if (condition) {
    Object.freeze(obj);
}
else {
    obj = { objProp: "example" };
}

推荐阅读