动态卸载/加载页面的某一部分（DOM）

Question

问题： 我们构建了一个类似仪表盘的应用程序，用户可以动态添加视图（类似选项卡）。随着用户加载更多的视图，页面不断崩溃。这可能是由于页面上有大量DOM计数和监听器。 解决方案： 我们正在寻找一种方法，可以智能地卸载选项卡（包括DOM和其监听器），并在用户返回选项卡时重新加载它。选项卡应该被卸载并以某种形式（一些HTML5客户端存储）持久化，以便我们可以将其恢复到相同的状态。我们是否有任何库来实现这一点？ 序列化数据及其状态：我们正在考虑的一种方法是将数据及其状态序列化到本地存储中，并尝试根据数据重构视图。这种方法应该可行，如果我们使用像Angular这样的框架，它可能相对容易。优点：分离视图和数据呈现逻辑。缺点：该解决方案不是通用的。 我们正在寻找一些在DOM级别工作的东西。

- Varunkumar Nagarajan

---

页面崩溃是指浏览器出了问题，还是你尝试了与浏览器不同的操作？ - Anirudha Gupta

页面并不总是崩溃。但是，随着我们添加更多的标签页，它会变得非常沉重。因此，我们正在尝试在用户返回该标签页之前卸载一些DOM。 - Varunkumar Nagarajan

我认为你需要改进你的代码。如果你愿意，你可以限制同时打开的选项卡数量。如果你在JS中使用缓存来保存JavaScript对象并再次使用它们，那么可以节省一些内存成本。 - Anirudha Gupta

我不想限制选项卡的数量。我正在寻找一种解决方案，使应用程序能够智能地卸载一些选项卡，并在需要时重新加载它们。 - Varunkumar Nagarajan

Answer 1

你可以尝试缓存模型而不是整个DOM。JS生成DOM并不像你想象的那么慢。

- Manjit

Answer 2

不要保存整个选项卡和所有的监听器，而是应该创建一个 JSON 对象，包含你想要卸载的选项卡的重要值，然后再删除该选项卡。

如果用户想要重新打开它，可以加载一个空白选项卡，然后使用之前保存的值来恢复先前的选项卡状态。这样就不需要任何额外的库了。

- rafaelcastrocouto