在SPA中堆叠页面，好主意或坏主意

stacking pages in SPA, good idea or bad?

本文关键字：好主意 SPA      更新时间：2023-09-26

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

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

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

现在，在我的框架中，我想出了一个非常简单的解决方案来将页面保存在内存中，以便当用户按下后退按钮时，我只是在堆栈中找到页面，如果它存在，我只是将其带到前面并将当前页面推回堆栈。

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

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

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

所以我的问题是，堆叠有这些问题的页面甚至是一个好主意吗？还是它只是不打算在浏览器中发生？

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

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

相关文章：