关于现代浏览器的 back-and-forward 缓存机制

setUpLocationChangeListener：设置位置更改侦听器。 这个侦听器检测从路由器外部触发的导航（例如，浏览器后退/前进按钮）并安排相应的路由器导航，以便触发正确的 guard event.

Angular 路由文档里提到：

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 一份调查报告统计，移动设备上大约 20% 的页面访问是通过后退和前进按钮进行的。

在考虑用户应该如何体验后退或前进导航时，我们确实有一个理想的体验 - 基于特定移动平台的原生应用。 例如，Android 维护着一个 Activities 栈。 当用户导航到另一个页面时，该堆栈项目将关闭。 返回时，只需将其重新打开即可。 结果，该页面的状态以极其有效的方式显示给用户。

实际上，浏览器将为每个导航创建一个新 frame 。 无论是在同一个站点内进行跳转，还是跨域跳转，浏览器都会将页面冻结。 这包括拍摄页面快照以及其他元数据。 此外，该页面上的所有工作，包括任何延迟的任务，如 setTimeout 都将停止，直到通过 bfcache 再次到达该页面时才会恢复。 当用户使用后退或前进按钮导航回到堆栈中的某个项目时，浏览器会将它从 cache 中取下来，并呈现给用户而不刷新内容。 这包括所有可能处于变化中的输入元素状态。 换句话说，这是一种有状态浏览。

在 SPA 即单页面应用里，当用户与浏览器的后退按钮交互时，并没有真正导航到新的 HTML 页面。 我们在 window.onpopstate 上与 history.pushState 和 history.replaceState 等 API 进行交互。

在 SPA 中使用后退和前进按钮的缺点是绘制 DOM 和从浏览器缓存中检索资源的成本。 如果文档非常大，即使从浏览器缓存中检索资源也可能代价高昂。 此外，保持以前的滚动位置可能非常棘手。 在 Ember.js 社区中，ember-router-scroll 已成为帮助 SPA 正确实现这一点的关键。 然而，它对于延迟加载的 DOM 元素和内容繁多的大型文档也很棘手。 当然，导航之前页面的冻结状态将有助于所有 SPA 恢复上次滚动的位置。 然而，这将需要不同的浏览器 API 来解决上面提出的一些问题。