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

Question

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

如果您曾经使用过 android，您就会发现在 android 中创建的每个新事件或页面都会将前一个事件或页面推回堆栈中，一旦用户按下后退按钮即可访问该堆栈，就像历史记录一样在浏览器中。

唯一的区别是，在 Android 中，已被推送到堆栈的页面会一直保留在那里，直到操作系统耗尽内存或其他东西，但在浏览器中，页面无论如何都会被破坏。

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

但是这个方法有一些问题:

1. 如果将堆叠页面保存在 javascript 变量中，或者将其保存在 DOM 中并仅设置 display: none;应用于它的样式，将其带到前面并使其可见，需要再次绘制整个页面，如果页面太大，这意味着很多过程，并使页面之间的过渡极其缓慢，特别是如果您有一些动画页面转换时开启。

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

所以我的问题是，堆叠存在这些问题的页面是个好主意吗？或者它只是不应该在浏览器中发生？

Answer 1

根据您的 SPA，我认为将所有页面保留在 DOM 中并使用 display: none; 或不同的 z-index 隐藏它们并不是一个好主意。您可以尝试做的是将页面的状态/信息保存在变量中，并从 DOM 中删除所有相关元素。当用户返回一页时，您使用之前存储在变量中的信息重新创建了元素。这样您就可以防止从服务器加载信息，并且返回到任何状态都不会出现任何问题。

您可以通过将最后一页保留在 DOM 中并简单地隐藏它并将之前页面的状态保留在变量中来进一步优化它。