Javascript behavior on page refresh

Question

What is the expected behavior of Javascript when you do a soft refresh on a web page?

I know that when you refresh a page, most web browsers will preserve values entered into form elements on a page. But it becomes harder to predict what will happen on a refresh when half of the page is dynamically generated.

My question is a little more general than that, though. I want to know what the prescribed behavior is for a web browser when a page will dynamic content is refreshed. In particular:

• What Javascript gets rerun.
• How is the DOM altered on the refresh.
• How are form values "floated" to the proper place in the DOM after a refresh.
• What other quirky stuff goes on?

Answer 1

A reload = a complete re-request. (shift + reload = reload all js and css files from server)

The browser might also remember name="" value="" pairs, and tries to pre-populate the fields based on the remembered pairs. It is not about trying to populate exactly what fields are in what pixel or whatever.

I refresh pages all the time when developing, all javascript is re-run as if the page is loaded anew. I do not believe the change events kick off in the page due to remembered values.

This is also true for firefox -> this frame -> reload or IE right click on a frame and reload.

Chrome does not allow single-frame reloads.

Answer 2

If you leave a page by clicking on a link or entering an URL into the navigation bar some browsers try to pause the page and resume it once the user comes back. This technique is known under different names:

• Safari/WebKit: Page Cache
• Firefox: Back-Forward Cache
• Opera: Fast History Navigation

For the page it looks as if the user has never left it. However not all pages can be paused. Especially pages with plugins, pages served using HTTPS and all pages with an unload event handler are ignored by a page cache.

If the page cache is not used, the page is reloaded from the server. Browsers might fill in form fields and restore scroll positions.