Ajax,后退按钮和DOM更新

Question

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

它在stackoverflow,reddit和许多其他流行的网站上以这种方式工作.(尝试在此问题中添加测试评论,然后导航到不同的页面并点击返回按钮返回 - 您的评论将"消失")

这是有道理的,但一些网站(apple.com,basecamphq.com等)在某种程度上迫使浏览器为用户提供最新的页面状态.(转到http://www.apple.com/ca/search/?q=ipod,单击顶部的"下载"链接,然后单击"返回"按钮 - 将保留所有DOM更新)

来自哪里的不一致？

Answer 1

一个答案:除其他外,卸载事件导致后退/前进缓存无效.

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

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

jQuery会自动将卸载事件附加到窗口,所以不幸的是,使用jQuery会使您的页面无法存储在bfcache中以保存DOM并快速返回/转发.[更新:这已在jQuery 1.4中修复,因此它仅适用于IE]

• 有关Firefox bfcache的信息
• 有关Safari页面缓存的信息以及卸载事件如何工作的未来可能的更改
• Opera使用快速历史导航
• Chrome没有页面缓存([1],[2])
• 用于DOM操作和bfcache的页面:
  • 此页面将存储在常规缓存中
  • 此页面不会,但仍将是bfcached

Answer 2

我一直试图让Chrome的行为像Safari一样,而我发现的唯一方法就是设置Cache-control: no-store标题.这会强制浏览器在用户按下后退按钮时从服务器重新获取页面.不理想,但比显示过时的页面更好.