A common complaint of Twitter is that there’s a quite a bit of lag when going from one part of Twitter to the other. The engineering team feels that they sufficiently solved the problem through an implementation of pushState, and have taken to their blog to explain how they did it.
The Twitter engineering team says that pushState is part of the HTML5 History API – a set of tools that, as Mozilla puts it, “exposes useful methods and properties that let you move back and forth through the user’s history, as well as… manipulate the contents of the history stack.” As for pushState itself, the team at Twitter explains it as thus:
While the pushState() method is used when navigating forward from A to B, the History API also provides a “popstate” event—used to mange back/forward button navigation. The event’s “state” property maps to the data passed as the first argument to pushState().
If the user presses the back button to return to the initial point from which he/she first navigated via pushState, the “state” property of the “popstate” event will be undefined. To set the state for the initial, full-page load use the replaceState() method. It accepts the same arguments as the pushState() method.
Here’s a visual explanation:
The team says that implementing pushState was relatively simple, but there were a few problems that they had to overcome. In particular, not every browser is up to date on the latest advances in the History API and programmers have to replicate behaviors that are otherwise present in full-page reloads.
Other problems were present as well with one being that all browsers currently ignore the title attribute in pushState. All updates must be performed manually at the time being. Another problem arose from Firefox imposing a 640kb character limit on any serialized state objects that are passed to pushState.
Despite all this, the team says they’re pleased with the HTML5 History API. They feel that it has improved rendering teams significantly on the Twitter Web page and app.
If you want to play around with the History API or pushState, check out these two github projects from balupton and defunkt.