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

Question

问题：

我们已经构建了一个类似仪表板的应用程序，用户可以在其中动态添加视图（将其视为选项卡）。当用户加载更多视图时，页面会不断崩溃。这可能是因为DOM数量过多而且页面上有很多听众。

解决方案：

我们正在寻找一种方法，我们可以智能地卸载选项卡（DOM及其侦听器），并在用户返回选项卡时重新加载它。该选项卡应该以某种形式（某些HTML5客户端存储）卸载和持久化，以便我们可以将其恢复到相同的状态。我们有任何图书馆可以做到吗？

序列化数据及其状态：我们正在考虑的一种方法是在localstorage中序列化数据及其状态，并尝试根据数据重建视图。这种方法应该有效，如果我们使用像Angular这样的框架，它可能相对容易。优点：独立观点＆amp;数据呈现逻辑。缺点：解决方案不是通用的。

我们正在寻找适用于DOM级别的东西。

Answer 1

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

Answer 2

您应该只删除选项卡，而不是保存整个选项卡和所有侦听器，而应该使用您假装卸载的选项卡的重要值来创建JSON。

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