setUpLocationChangeListener：設定位置更改偵聽器。 這個偵聽器檢測從路由器外部觸發的導航（例如，瀏覽器後退/前進按鈕）並安排相應的路由器導航，以便觸發正確的 guard event.

Angular [路由檔案](https://angular.io/guide/router-tutorial-toh)裡提到：

> Had you clicked the browser's back button instead of the application's "Back" button, the application would have returned you to the heroes list as well. Angular application navigation updates the browser history as normal web navigation does.

如果單擊瀏覽器的後退按鈕而不是應用程式的`後退`按鈕，應用程式也會將我們返回到 hero list. Angular 應用程式導航會像普通 Web 導航一樣更新瀏覽器歷史記錄。

據 Google 一份[調查報告統計](https://dockyard.com/blog/2021/01/21/how-single-page-apps-and-bfcache-impact-the-user-experience)，移動裝置上大約 20% 的頁面訪問是透過後退和前進按鈕進行的。

在考慮使用者應該如何體驗後退或前進導航時，我們確實有一個理想的體驗 - 基於特定移動平臺的原生應用。 例如，Android 維護著一個 `Activities `棧。 當使用者導航到另一個頁面時，該堆疊專案將`關閉`。 返回時，只需將其重新`開啟`即可。 結果，該頁面的狀態以極其有效的方式顯示給使用者。

![](https://img-blog.csdnimg.cn/img_convert/02ee46b37f9b2337857d3b00d8cc5751.png)

實際上，瀏覽器將為每個導航建立一個新 frame 。 無論是在同一個站點內進行跳轉，還是跨域跳轉，瀏覽器都會將頁面凍結。 這包括拍攝頁面快照以及其他後設資料。 此外，該頁面上的所有工作，包括任何延遲的任務，如 setTimeout 都將停止，直到透過 bfcache 再次到達該頁面時才會恢復。 當使用者使用後退或前進按鈕導航回到堆疊中的某個專案時，瀏覽器會將它從 cache 中取下來，並呈現給使用者而不重新整理內容。 這包括所有可能處於變化中的輸入元素狀態。 換句話說，這是一種`有狀態瀏覽`。

在 SPA 即單頁面應用裡，當使用者與瀏覽器的後退按鈕互動時，並沒有真正導航到新的 HTML 頁面。 我們在 window.onpopstate 上與 history.pushState 和 history.replaceState 等 API 進行互動。

在 SPA 中使用後退和前進按鈕的缺點是繪製 DOM 和從瀏覽器快取中檢索資源的成本。 如果檔案非常大，即使從瀏覽器快取中檢索資源也可能代價高昂。 此外，保持以前的滾動位置可能非常棘手。 在 Ember.js 社群中，ember-router-scroll 已成為幫助 SPA 正確實現這一點的關鍵。 然而，它對於延遲載入的 DOM 元素和內容繁多的大型檔案也很棘手。 當然，導航之前頁面的凍結狀態將有助於所有 SPA 恢復上次滾動的位置。 然而，這將需要不同的瀏覽器 API 來解決上面提出的一些問題。

![](https://img-blog.csdnimg.cn/img_convert/53291592e7ef2d595f42fbe24fac1546.png)

關於現代瀏覽器的 back-and-forward 快取機制

相關文章