Ajax, back button and DOM updates

by

One answer: Among other things, unload events cause the back/forward cache to be invalidated.

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).

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 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]

More Related Contents:

  1. Fire Greasemonkey script on AJAX request
  2. Synchronous XMLHttpRequest on the main thread is deprecated
  3. How can I upload files asynchronously with jQuery?
  4. Variable doesn’t get returned from AJAX function
  5. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  6. WebRTC firefox constraints
  7. How do I programmatically click on an element in JavaScript?
  8. How do I return the response from an asynchronous call?
  9. Do websockets allow for p2p (browser to browser) communication?
  10. Adding CSRFToken to Ajax request
  11. AJAX POST and Plus Sign ( + ) — How to Encode?
  12. How to get response url in XMLHttpRequest?
  13. Cross Domain Resource Sharing GET: ‘refused to get unsafe header “etag”‘ from Response
  14. Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn’t work in Chrome)?
  15. Is it any limit for POST data size in Ajax?
  16. How to allow CORS in react.js?
  17. Load google maps v3 dynamically with ajax
  18. Dynamically Scrolling a Textarea
  19. How to generate a thumbnail image after adding an image inside an input type=”file” in a form and submitting them both on the same form
  20. Ajax Binary Response
  21. Relative URLs in AJAX requests
  22. “Permission denied” with Internet Explorer and jQuery
  23. Execute JavaScript after every JSF ajax postback
  24. Send form data using ajax
  25. Automatically resize jQuery UI dialog to the width of the content loaded by ajax
  26. How to add a Facebook “Like” button to an AJAX driven page
  27. $.post throwing “Illegal invocation “
  28. Differentiating Between an AJAX Call / Browser Request
  29. CORS error with jquery
  30. XMLHttpRequest testing in Jest

Leave a Comment