Ajax、后退按钮和 DOM 更新 [英] Ajax, back button and DOM updates
问题描述
如果 javascript 修改页面 A 中的 DOM，用户导航到页面 B，然后点击返回按钮返回页面 A.对页面 A 的 DOM 的所有修改都将丢失，用户将看到最初从页面中检索到的版本服务器.
If javascript modifies DOM in page A, user navigates to page B and then hits back button to get back to the page A. All modifications to DOM of page A are lost and user is presented with version that was originally retrieved from the server.
它在 stackoverflow、reddit 和许多其他流行网站上都是这样工作的.(尝试为此问题添加测试评论，然后导航到不同的页面并点击返回按钮返回 - 您的评论将消失")
It works that way on stackoverflow, reddit and many other popular websites. (try to add test comment to this question, then navigate to different page and hit back button to come back - your comment will be "gone")
这是有道理的，但一些网站(apple.com、basecamphq.com 等)以某种方式强迫浏览器为用户提供页面的最新状态.(转到 http://www.apple.com/ca/search/?q=ipod，点击顶部的下载链接，然后点击返回按钮 - 所有 DOM 更新将被保留)
This makes sense, yet some websites (apple.com, basecamphq.com etc) are somehow forcing browser to serve user the latest state of the page. (go to http://www.apple.com/ca/search/?q=ipod, click on say Downloads link at the top and then click back button - all DOM updates will be preserved)
不一致从何而来?
推荐答案
一个答案:除其他外，卸载事件会导致后退/前进缓存失效.
One answer: Among other things, unload events cause the back/forward cache to be invalidated.
某些浏览器将整个网页的当前状态存储在所谓的bfcache"或页面缓存"中.这允许他们在通过后退和前进按钮导航时非常快速地重新呈现页面，并保留 DOM 和所有 JavaScript 变量的状态.但是，当页面包含 onunload 事件时，这些事件可能会使页面进入非功能状态，因此页面不会存储在 bfcache 中，必须重新加载(但可以从标准缓存加载)并重新加载从头开始渲染，包括运行所有 onload 处理程序.当通过 bfcache 返回一个页面时，DOM 保持在它之前的状态，不需要触发 onload 处理程序(因为页面已经加载).
Some browsers store the current state of the entire web page in the so-called "bfcache" or "page cache". This allows them to re-render the page very quickly when navigating via the back and forward buttons, and preserves the state of the DOM and all JavaScript variables. However, when a page contains onunload events, those events could potentially put the page into a non-functional state, and so the page is not stored in the bfcache and must be reloaded (but may be loaded from the standard cache) and re-rendered from scratch, including running all onload handlers. When returning to a page via the bfcache, the DOM is kept in its previous state, without needing to fire onload handlers (because the page is already loaded).
请注意，在 Cache-Control 和其他 HTTP 标头方面，bfcache 的行为与标准浏览器缓存不同.在许多情况下，浏览器会将页面缓存在 bfcache 中，即使它不会将其存储在标准缓存中.
Note that the behavior of the bfcache is different from the standard browser cache with regards to Cache-Control and other HTTP headers. In many cases, browsers will cache a page in the bfcache even if it would not otherwise store it in the standard cache.
jQuery 自动将卸载事件附加到窗口，因此不幸的是，使用 jQuery 会使您的页面无法存储在 bfcache 中以进行 DOM 保存和快速后退/前进.[更新:这已在 jQuery 1.4 中得到修复，因此它仅适用于 IE]
jQuery automatically attaches an unload event to the window, so unfortunately using jQuery will disqualify your page from being stored in the bfcache for DOM preservation and quick back/forward. [Update: this has been fixed in jQuery 1.4 so that it only applies to IE]
- 有关 Firefox bfcache 的信息
- 有关 Safari 页面缓存的信息和卸载事件工作方式未来可能发生的变化
- Opera 使用快速历史导航
- Chrome 没有页面缓存([1], [2])
- 用于操作 DOM 和 bfcache 的页面:
这篇关于Ajax、后退按钮和 DOM 更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
