Optimize URL for Performance

2,820 views
2,736 views

Published on

Published in: Technology, Design
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,820
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
33
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Optimize URL for Performance

  1. 1. Optimize URL for Performance<br />@morgancheng<br />
  2. 2. Gawker Outage<br />Outage<br />http://blogs.wsj.com/digits/2011/02/07/gawker-outage-causing-twitter-stir/<br />
  3. 3. What The Hell?<br />
  4. 4. Hash Bang<br />http://lifehacker.com/#!5785979<br />
  5. 5.
  6. 6. Why HashBang?<br />
  7. 7. It All Starts With Desire for Performance<br />
  8. 8. Traditional Web<br />Server<br />Page A<br />Page C<br />Page B<br />
  9. 9. AJAX Web<br />Server<br />One Page<br />
  10. 10. Bookmark-able<br />
  11. 11. Hash in URL<br />http://lifehacker.com/#!5785979<br />http://lifehacker.com/#!3141592<br />Same Page<br />Differentiated by JavaScript<br />
  12. 12. Navigable<br />
  13. 13. Bonus: AJAX Caching<br />
  14. 14. Seems Hash is enough, why Bang?<br />
  15. 15. Audience of Web Site<br />Human User<br />Search Engine Crawler<br />
  16. 16. Google’s HashBang Scheme<br />http://code.google.com/web/ajaxcrawling/docs/specification.html<br />
  17. 17. Two URLs for Same Content<br />http://example.com/#!12345<br />http://example.com/?_escaped_fragment_=12345<br />
  18. 18. Only Google officially claims to support HashBang<br />
  19. 19. HashBang makes your content dependent on JavaScript<br />
  20. 20. Don’t Abuse Tech You Cannot Handle<br />
  21. 21. HTML5 to Help<br />
  22. 22. HTML5 History API<br />history.pushState(state,newTitle,newUrl)<br />history.replaceState(state,newTitle,newUrl)<br />popstate event<br />
  23. 23. Update URL without HashBang<br />history.pushState(null, <br /> null, <br /> “http://lifehacker.com/314159”)<br />Current Page Doesn’t Refresh<br />
  24. 24. HTML5 History API Detection<br />function supportHTML5History() {<br /> return !!(window.history && history.pushState);<br />}<br />
  25. 25. When can I use HTML5 History?<br />http://caniuse.com/#search=history<br />
  26. 26. YUI History Module<br />
  27. 27.
  28. 28.
  29. 29. Hijax = Hijack + AJAX<br />
  30. 30. Step 1: Build Web 1.0<br /> <a href=“/31415926”>page one</a><br /> <a href=“/31415927”>page two</a><br />
  31. 31. Step 2: Add JavaScript<br /> <a href=“/31415926”>page one</a><br /> <a href=“/31415927”>page two</a><br />Y.delegate(‘click’, onPageClick, ‘body’, ‘a’);<br />
  32. 32. Step 3: Hijack and Do AJAX<br />function onPageClick(ev) {<br />ev.preventDefault();<br /> // do AJAX to update page<br /> // update URL with Hash or HTML5 API<br />}<br />
  33. 33. Tips<br />
  34. 34. Use Event Delegate<br />
  35. 35. Don’t Over Cache<br />
  36. 36.
  37. 37. {<br />http://mustache.github.com/<br />
  38. 38. Graceful Degradation vs.Progressive Enhancement<br />
  39. 39. Thanks<br />

×