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

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

3. What The Hell?

4. HashBang http://lifehacker.com/#!5785979

6. Why HashBang?

7. It All Starts With Desire for Performance

8. Web 1.0 Server Page A Page C Page B

9. AJAX Web Server One Page

10. Fast is Not Enough

11. Bookmark-able

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

13. Navigable Backward Forward

14. Bonus: AJAX Caching

15. Looks Hash is enoughWhy Bang?

16. Audience of Web Site Human User Search Engine Crawler

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

18. Two URLs for Same Content http://example.com/#!12345 http://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 API history.pushState(state, newTitle, newUrl) history.replaceState(state, newTitle, newUrl) popstate event

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

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

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

30. YUI History Module

31. Y.History Y.HistoryHash Y.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 AJAX function 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/12345 Navigate http://example.com/12345#56789 Bookmark What 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#56789 Redirect http://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