使用 Object.freeze 和 object.unfreeze 来减少具有大量表数据行的响应式页面中的内存膨胀

Posted 2023-02-22

【中文标题】使用 Object.freeze 和 object.unfreeze 来减少具有大量表数据行的响应式页面中的内存膨胀

【英文标题】：Use Object.freeze and object.unfreeze to reduce memory bloat in reactive pages with lots of table data rows

【发布时间】：2019-09-20 06:02:36

【问题描述】：

我正在使用here 提供的方法来减少我的 Vue.js 应用程序的内存膨胀，该应用程序具有大量表/行数据。我们看到内存膨胀，尤其是在 IE 中。 前任。加载页面时，包含几行的页面可能会跳转约 100MB。

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

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

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

使用类似this package的东西

【问题讨论】：

没有unfreeze 这样的东西。你应该用它的真名来称呼它：浅拷贝。

github.com/gajus/object-unfreeze 是做什么的？

Yes。文档中的示例显示它返回一个新对象，而不是“解冻”传递的对象。 （顺便说一句，如果你问我，他们的浅拷贝实现很糟糕）。

嗯，你知道更好的吗？

只需array.slice() 和Object.assign(Object.create(Object.getPrototypeOf(object)), object) 就足够了。它们很简单，通常不需要额外的功能，更不用说库了。如果您不关心自定义原型，请将Object.create(…) 简化为。

【参考方案1】：

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

例如：

let obj =  objProp: "example" ;

if (condition) 
    Object.freeze(obj);

else 
    obj =  objProp: "example" ;