关于前端:关于现代浏览器的-backandforward-缓存机制

4次阅读

共计 1159 个字符,预计需要花费 3 分钟才能阅读完成。

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 来解决下面提出的一些问题。

正文完
 0