AdvantagesThe transition is crazy fast
A full page load will take no longer then 2 seconds in most cases. Hiding and showing a div takes less than 10ms and thus is instantaneous as far as the user is concerned. State is maintained in the inactive divs
If you had forms, or other interactive elements, they will stay where you left them until the page is loaded again. Because all you are doing is hiding the element, nothing is reset by activating different stacked divs. Fancy pants animations
Page loads are fairly unimaginative and don't allow you to communicate anything about the transition between the pages. Rather then simply doing a show/hide with the stacked divs, you can animate the transition between them to show the relationship between the two pages.
DisadvantagesAll the content is generated when the page is loaded
This is not an issue so long as nothing changes after the page is loaded. It's going to be a problem if the actions in one div effect the content of another. In this case you would need to either update the other divs client side (not so simple anymore), or just do a regular old page load to get the updated content. State is maintained in the inactive divs
If you need forms and interactive element to be reset when the div is activated, a page load may be the easier way to accomplish this. The transition is crazy fast
The speed at which the page changes may be disorienting when switching tasks or modes. Instant changes are great while performing a single task, or tasks of the same type, it puts the user in control of the application. The short delay of a page load communicates shared control, which is what people expect when changing modes or saving data.
In PracticeWe use this technique for our tests in Verify. Each test consists of multiple steps, so we structured each test as a page load, and each step as a stacked div within the test. This provided a couple different benefits:
- Animated transitions to communicate progress (watch the direction the instructions tab moves when clicked)
- Frictionless movements between test steps (accomplished by removing page loads)
- All the markup can be generated server side (thanks to page loads between tests)
- Asynchronous persistance of data (by sending AJAX requests in the background)