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

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

如果你曾经使用过安卓系统，你会发现在安卓系统中创建的每个新活动或页面都会将上一个活动或页面推回到一个堆栈中，一旦用户按下后退按钮，就可以访问该堆栈，就像浏览器中的历史记录一样

唯一的区别是，在android中，被推到堆栈中的页面会一直保持在那里，直到操作系统耗尽ram或其他东西，但在浏览器中，无论发生什么，页面都会被破坏

现在，在我的框架中，我提出了一个非常简单的解决方案，可以将页面保存在内存中，这样当用户按下后退按钮时，我就可以在堆栈中找到页面，而不是从服务器加载数据，如果页面存在，我就把它放在前面，并将当前页面推回到堆栈中

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

如果将堆叠的页面保存在javascript变量中，或者将其保存在DOM中，只显示：无；应用于它的样式，将其置于前面并使其可见，需要重新绘制整个页面，如果页面太大，这意味着大量的过程，并使页面之间的转换非常缓慢，特别是如果在页面转换时有一些动画在进行

如果堆叠的页面是可见的，并且只是使用z-index向后推，那么滚动将导致问题，因为之前页面的滚动仍然可用。如果你让页面溢出：隐藏；然后，如果您堆叠多个页面，滚动会变得非常缓慢和不稳定，因为浏览器必须在多层绘制页面上滚动

所以我的问题是，用这些问题堆叠页面是不是一个好主意？

---

或者它只是不打算在浏览器中发生吗？

根据您的SPA，我认为将所有页面保留在DOM中并用

显示：无隐藏它们不是一个好主意或其他z索引。您可以尝试将页面的状态/信息保存在一个变量中，并从DOM中删除所有相关元素。当用户返回一个页面时，您使用先前存储在变量中的信息重新创建了元素。这样可以防止从服务器加载信息，并且返回到任何状态都不会有任何问题

您可以通过将最后一页保留在DOM中并将其隐藏并保留在变量中来进一步优化它。
您使用的是哪个JS框架？为什么不能只使用HTML5历史API？这是我自己创建的自定义框架。因为历史API不保留页面的最后状态，例如，如果您有一个加载一些ajax数据的页面，每次按“后退”按钮时，都必须重新加载ajax数据。您肯定可以使用HTML5 pushstate更改页面状态，而“后退”按钮不会导致完全重新加载。您的意思是将数据模型保存在变量中，并检查该页面的数据模型是否存在，如果是的话，那么从那个模型加载页面，对吗？是的，没错。您甚至可以尝试使用Claies建议的方法来保持每个页面的状态，这样您就不必自己设置逻辑。History API还有保持浏览器后退/前进按钮正常工作的好处，我一直在使用这种方法，直到现在，我才意识到对于大型页面，这种方法不起作用，想象一下像google plus这样的页面，你可以滚动数英里，页面越来越大，现在如果你转到个人资料页面，然后返回，您可能拥有整个页面的数据模型，但创建该列表并将用户带到他所在的位置，需要大量的处理和绘制，因此我选择将主页始终保留在内存中，以便当用户按下“后退”按钮时，他可以立即返回他所在的位置。