我已经在javascript中为我的个人单页应用程序创建了一个框架，并且我尝试向其添加堆叠页面功能。
如果您曾经使用过Android，您已经看到在android中创建的每个新活动或页面都会将前一个活动或页面推回到堆栈中，一旦用户按下后退按钮就可以访问该堆栈，就像历史记录一样在浏览器中。
唯一的区别是在android中已被推送到堆栈的页面，直到操作系统用完ram或其他东西，但在浏览器中，无论如何都会破坏页面。
现在，在我的框架中，我提出了一个非常简单的解决办法，将页面保留在内存中，以便当用户按下后退按钮，而不是从服务器加载数据时，我只是在堆栈中找到页面，如果它存在，我只是将它带到前面并将当前页面推回堆栈。
但此方法存在一些问题：
如果你将堆叠的页面保存在一个javascript变量中，或者你将它保存在DOM中，只需将display：none;应用到它的样式，将它带到前面并使其可见需要再次绘制整个页面，如果页面太大，这意味着很多过程并使页面之间的过渡非常慢，特别是如果你有一些动画去在页面过渡时。
如果堆叠的页面可见，并且只是使用z-index推回，那么滚动将导致问题，因为之前页面的滚动仍然可用。如果你使页面溢出：隐藏;然后，如果你堆叠多个页面，滚动变得非常缓慢和不连贯，因为浏览器必须滚动多层绘制的页面。
所以我的问题是，用这些问题堆叠页面是一个好主意吗？ 或者它只是不打算在浏览器中发生？
答案 0 :(得分：1)
根据您的SPA，我不认为将所有网页保留在DOM中并使用display: none;或不同的z-index隐藏它们是个好主意。您可以尝试做的是将页面的状态/信息保存在变量中，并从DOM中删除所有相关元素。当用户返回一个页面时，您使用先前存储在变量中的信息重新创建元素。这样就可以防止从服务器加载信息，并且在返回任何州时都不会有任何问题。
您可以通过将最后一页保留在DOM中并将其隐藏起来并将之前的页面状态保存在变量中来进一步优化它。