I was on Twitter the other day, and I opened chrome devtools and went into the network console, and then clicked on a link on Twitter (specifically the one on the menubar which said ‘Me’), and then, as always, the page didn’t really load again, it seemed to be AJAX-ified, but then I looked into the network content, and all I saw was a few images and a few javascript files.
Unless Twitter loads content from the ‘Me’ page on the loading of the home page (which I highly doubt, since Twitter is pretty fast at loading too), what can make the navigation between Twitter’s pages so fast?
Like all JS apps, the pages you see are just “views”. You are on the same page, stuff gets loaded via AJAX, and then JS renders the data with the template to form that view.
Here’s a scenario: when you open a clean browser and go to Twitter’s timeline, everything loads. This also includes all scripts that are needed to render the succeeding pages.
Now, when you go to another page, like the “Me”, Twitter does not have the resources of the page just yet. So, it loads via AJAX the needed resources to render the “Me” page like all data, and the template for it. After loading, it renders the data and with the template to form the “Me” page.
Now when you go back to the timeline, Twitter never discarded the timeline data but cached it (localstorage at best). Thus going back to the timeline (or any visited page for that matter) is just a matter of reading cached data, cached templates and rerendering the view onto the page. No network requests needed at all.
As you also notice, new data is retrieved incrementally, by just querying from the server new tweets rather than getting them all back. Only when the page determines that it needs a fresh set of data will it query a bunch of them.
Also, JSON data is a million times (to exaggerate) lighter than loading a normal page.