在SPA中堆疊頁面，好主意還是不好？

Question

我已經在我的個人單頁應用程序中爲javascript創建了一個框架，並且正在嘗試向其添加堆疊頁面功能。

如果您曾經使用過android，您已經看到在android中創建的每個新活動或頁面都會將前一個活動或頁面推回到一個用戶按下後退按鈕後可以訪問的堆棧中，就像歷史在瀏覽器中。

唯一的區別是，在android中，已經推入堆棧的頁面停留在那裏，直到操作系統用完RAM或其他東西，但是在瀏覽器中，無論如何頁面都會被銷燬。

現在，在我的框架中，我想出了一個非常簡單的方法來將頁面保存在內存中，以便當用戶按下後退按鈕時，而不是從服務器加載數據，我只是在堆棧中找到頁面，它存在，我只是把它放在前面，並將當前頁面推回到堆棧。

但也存在一些問題，用這種方法：

1. 如果保持堆疊網頁的JavaScript變量，或者你把它放在DOM，只是使顯示：無;應用於它的樣式，將它帶到前面並使其可見，需要再次繪製整個頁面，並且如果頁面太大，這意味着很多過程並使頁面之間的轉換非常緩慢，特別是如果您有一些動畫正在在頁面轉換時。

2. 如果堆疊的頁面可見，並且只是使用z-index推回，那麼滾動將導致問題，因爲前面頁面的滾動仍然可用。如果你讓頁面溢出：隱藏;那麼如果您堆疊多個頁面，則滾動會變得非常緩慢且不連貫，因爲瀏覽器必須滾動多層被繪製的頁面。

所以我的問題是，這是堆棧頁面這些問題甚至是一個好主意？ 還是隻是不是意味着在瀏覽器中發生？

Answer 1

取決於您的SPA，我認爲將所有頁面保留在DOM中並將其隱藏在display: none;或不同的z-index中並不是一個好主意。你可以嘗試做的是將頁面的狀態/信息保存在一個變量中，並從DOM中刪除所有相關元素。當用戶返回一頁時，您使用之前存儲在變量中的信息重新創建元素。通過這種方式，您可以防止從服務器加載信息，並且在返回任何狀態時都沒有任何問題。

您可以通過將最後一頁保留在DOM中並將其隱藏並保存在變量中之前保持頁面狀態，從而進一步優化它。