在SPA中堆叠页面，好主意还是不好？

Question

我已经在我的个人单页应用程序中为javascript创建了一个框架，并且正在尝试向其添加堆叠页面功能。

如果您曾经使用过android，您已经看到在android中创建的每个新活动或页面都会将前一个活动或页面推回到一个用户按下后退按钮后可以访问的堆栈中，就像历史在浏览器中。

唯一的区别是，在android中，已经推入堆栈的页面停留在那里，直到操作系统用完RAM或其他东西，但是在浏览器中，无论如何页面都会被销毁。

现在，在我的框架中，我想出了一个非常简单的方法来将页面保存在内存中，以便当用户按下后退按钮时，而不是从服务器加载数据，我只是在堆栈中找到页面，它存在，我只是把它放在前面，并将当前页面推回到堆栈。

但也存在一些问题，用这种方法：

1. 如果保持堆叠网页的JavaScript变量，或者你把它放在DOM，只是使显示：无;应用于它的样式，将它带到前面并使其可见，需要再次绘制整个页面，并且如果页面太大，这意味着很多过程并使页面之间的转换非常缓慢，特别是如果您有一些动画正在在页面转换时。

2. 如果堆叠的页面可见，并且只是使用z-index推回，那么滚动将导致问题，因为前面页面的滚动仍然可用。如果你让页面溢出：隐藏;那么如果您堆叠多个页面，则滚动会变得非常缓慢且不连贯，因为浏览器必须滚动多层被绘制的页面。

所以我的问题是，这是堆栈页面这些问题甚至是一个好主意？ 还是只是不是意味着在浏览器中发生？

Answer 1

取决于您的SPA，我认为将所有页面保留在DOM中并将其隐藏在display: none;或不同的z-index中并不是一个好主意。你可以尝试做的是将页面的状态/信息保存在一个变量中，并从DOM中删除所有相关元素。当用户返回一页时，您使用之前存储在变量中的信息重新创建元素。通过这种方式，您可以防止从服务器加载信息，并且在返回任何状态时都没有任何问题。

您可以通过将最后一页保留在DOM中并将其隐藏并保存在变量中之前保持页面状态，从而进一步优化它。