It's About The Hashbangs
danwebb.net
danwebb.net
The bottom line is that a client-side architecture leads to slower performance because most of the code is being executed on our user’s machines rather than our own.
From a brief look I had at it a few months ago they were sending a 1.5Mb javascript file which contained a template for every single action you could ever perform on twitter. Because it was squished I assume it got invalidated a lot as they made any tweak to their UI. That seemed to be the greater problem rather than these mysterious execution times.
Seriously, who has ever had a performance problem transforming a bit of JSON with something like jQuery.tmpl or mustache? They ultimately seem to have thrown the baby out with the bath water.
Then again we had this discussion about client v server rendering when 37signals posted their new architecture, I understand there are advantage of doing the template transforms serverside.
Mobile devices. Just parsing and executing a big chunk of JavaScript (like the jQuery library itself) can take the best part of a second on many mobile phones.
http://www.showslow.com/details/92778/http://twitter.com/#!/...
That's 1,887 ms to render anything and almost a full second of JavaScript execution time.
Waterfall graphs show a similar story: they pushed everything past the document load event so the monitoring tools are a bit off:
http://www.webpagetest.org/result/120414_9W_3Z15P/ shows an acceptable 1.4 second start of render, which isn't great but acceptable, but looking at the actual video shows that's merely how long it took to render a tiny part of the page - displaying the content which the user actually wanted about took over 8 seconds!
http://www.webpagetest.org/video/view.php?id=120414_2a4075f2...
Hat tip to dan webb.
Then it would be nice to have some background on what pushState is (or will be) and what its purpose is.
pushState lets you rewrite the bits of the page you want to change using javascript, without reloading anything inessential.
Hashtags do the same thing, because technically, hashtagged urls (twitter/posts#1 vs twitter/posts#2) are on the same page. It's a way of changing the URL in the address bar without technically changing the page.
Both hashtags and pushState are ways of changing the page and the URL using Javascript. pushState is the "legal" way, which changes the page's URL (i.e. twitter/posts/1 -> twitter/posts/2). hashtags technically don't change the page, they change the part of the URL after the hash (i.e. twitter/posts#1 -> twitter/posts#2).
hashtags are used because older browsers don't let you use pushState. pushState is used because it's more correct, and doesn't exploit a hacky loophole.
Both are used because they are faster than a whole new page request, and they let you share the post by cutting and pasting the URL in your address bar.