一尘不染

Ajax,后退按钮和DOM更新

javascript

如果javascript修改了页面A中的DOM,则用户导航至页面B,然后单击返回按钮以返回页面A。页面A对DOM的所有修改都将丢失,并且向用户显示最初从服务器检索到的版本。

它可以在stackoverflow,reddit和许多其他流行的网站上以这种方式工作。(尝试向该问题添加测试评论,然后导航至其他页面并点击返回按钮以返回-
您的评论将“消失”)

这很有意义,但是某些网站(apple.com,basecamphq.com等)以某种方式迫使浏览器向用户提供页面的最新状态。单击顶部的“说下载”链接,然后单击“后退”按钮-所有DOM更新将被保留)

不一致来自何处?


阅读 338

收藏
2020-04-25

共1个答案

一尘不染

一个答案:除其他事项外, 卸载事件会使后退/前进缓存无效

一些浏览器将整个网页的当前状态存储在所谓的“bfcache”或“页面缓存”中。这使他们可以在通过后退和前进按钮导航时非常快速地重新呈现页面,并保留DOM和所有JavaScript变量的状态。但是,当页面包含onunload事件时,这些事件可能会将页面置于非功能状态,因此该页面未存储在bfcache中,必须重新加载(但可以从标准缓存中加载)并重新从头开始渲染,包括运行所有onload处理程序。通过bfcache返回页面时,DOM保持其先前状态,而无需触发onload处理程序(因为该页面已经加载)。

请注意,关于Cache-Control和其他HTTP标头,bfcache的行为与标准浏览器缓存不同。在许多情况下,浏览器会将页面缓存在bfcache中,即使它不将其存储在标准缓存中也是如此。

jQuery会自动将卸载事件附加到窗口,因此不幸的是,使用jQuery会使您的页面无法保存在bfcache中以进行DOM保留和快速前进/后退

2020-04-25