It discusses ways to optimize URL performance for AJAX applications, including using hash fragments, the HTML5 History API, and hijacking links to load content via AJAX while updating the URL. Hash fragments allow bookmarking of single page applications but require JavaScript. The HTML5 History API allows updating the URL without refreshing the page but has limited browser support. Hijacking links is a common technique to build AJAX/single page applications.

1. Optimize URL for PerformanceMorgan Cheng, Apr 15th 2011@morgancheng

2. Gawker Outage After Redesignhttp://blogs.wsj.com/digits/2011/02/07/gawker-outage-causing-twitter-stir/

3. What The Hell?

4. HashBanghttp://lifehacker.com/#!5785979

6. Why HashBang?

7. It All Starts With Desire for Performance

8. Web 1.0ServerPage APage CPage B

9. AJAX WebServerOne Page

10. Fast is Not Enough

11. Bookmark-able

12. Hash Fragment is Not Sent to Serverhttp://lifehacker.com/#!5785979http://lifehacker.com/#!3141592Same PageDifferentiated by JavaScript

13. NavigableBackwardForward

14. Bonus: AJAX Caching

15. Looks Hash is enoughWhy Bang?

16. Audience of Web SiteHuman UserSearch Engine Crawler

17. Google’s HashBang Schemehttp://code.google.com/web/ajaxcrawling/docs/specification.html

18. Two URLs for Same Contenthttp://example.com/#!12345http://example.com/?_escaped_fragment_=12345

19. Only Google officially claims to support HashBang

20. HashBang makes your content dependent on JavaScript

21. Don’t Abuse Tech You Cannot Handle

22. Hey, butFacebook and Twitter do similar trick

23. So, Red Pill or Blue Pill?

24. Web Site orWeb Application

25. HTML5 to Help

26. HTML5 History APIhistory.pushState(state, newTitle, newUrl)history.replaceState(state, newTitle, newUrl)popstate event

27. Update URL without HashBanghistory.pushState(null, null, “http://lifehacker.com/314159”)Current Page Doesn’t Refresh

28. HTML5 History API Detectionfunction supportHTML5History() { return !!(window.history && history.pushState);}

29. When can I use HTML5 History?http://caniuse.com/#search=history

30. YUI History Module

31. Y.HistoryY.HistoryHashY.HistoryHTML5

33. Hijax = Hijack + AJAX

34. Step 1: Build Web 1.0 <a href=“/31415926”>page one</a> <a href=“/31415927”>page two</a>

35. Step 2: Add JavaScript <a href=“/31415926”>page one</a> <a href=“/31415927”>page two</a>Y.delegate(‘click’, onPageClick, ‘body’, ‘a’);

36. Step 3: Hijack and Do AJAXfunction onPageClick(ev) { if (isInternalLink(ev.target.get(‘href’)) {ev.preventDefault(); // do AJAX to update page // update URL with Hash or History API }}

37. More Tricks

38. http://example.com/12345Navigatehttp://example.com/12345#56789 BookmarkWhat about this?

39. Flush Inline JavaScript to Redirect<script type=“text/javascript”> if (window.location.hash) {window.location = directUrl(window.location.hash); }</script><?php flush(); ?>http://example.com/12345#56789Redirecthttp://example.com/56789

40. Use Event Delegate

41. Don’t Over Cache

43. {http://mustache.github.com/

44. Graceful Degradation vs.Progressive Enhancement

45. Thanks