Optimize URL for Performance<br />@morgancheng<br />
Gawker Outage<br />Outage<br />http://blogs.wsj.com/digits/2011/02/07/gawker-outage-causing-twitter-stir/<br />
What The Hell?<br />
Hash Bang<br />http://lifehacker.com/#!5785979<br />
Why HashBang?<br />
It All Starts With Desire for Performance<br />
Traditional Web<br />Server<br />Page A<br />Page C<br />Page B<br />
AJAX Web<br />Server<br />One Page<br />
Bookmark-able<br />
Hash in URL<br />http://lifehacker.com/#!5785979<br />http://lifehacker.com/#!3141592<br />Same Page<br />Differentiated b...
Navigable<br />
Bonus: AJAX Caching<br />
Seems Hash is enough, why Bang?<br />
Audience of Web Site<br />Human User<br />Search Engine Crawler<br />
Google’s HashBang Scheme<br />http://code.google.com/web/ajaxcrawling/docs/specification.html<br />
Two URLs for Same Content<br />http://example.com/#!12345<br />http://example.com/?_escaped_fragment_=12345<br />
Only Google officially claims to support HashBang<br />
HashBang makes your content dependent on JavaScript<br />
Don’t Abuse Tech You Cannot Handle<br />
HTML5 to Help<br />
HTML5 History API<br />history.pushState(state,newTitle,newUrl)<br />history.replaceState(state,newTitle,newUrl)<br />pops...
Update URL without HashBang<br />history.pushState(null, <br />	null, <br />    “http://lifehacker.com/314159”)<br />Curre...
HTML5 History API Detection<br />function supportHTML5History() {<br />	return !!(window.history && history.pushState);<br...
When can I use HTML5 History?<br />http://caniuse.com/#search=history<br />
YUI History Module<br />
Hijax = Hijack + AJAX<br />
Step 1: Build Web 1.0<br />	<a href=“/31415926”>page one</a><br />	<a href=“/31415927”>page two</a><br />
Step 2: Add JavaScript<br />	<a href=“/31415926”>page one</a><br />	<a href=“/31415927”>page two</a><br />Y.delegate(‘clic...
Step 3: Hijack and Do AJAX<br />function onPageClick(ev) {<br />ev.preventDefault();<br />     // do AJAX to update page<b...
Tips<br />
Use Event Delegate<br />
Don’t Over Cache<br />
{<br />http://mustache.github.com/<br />
Graceful Degradation vs.Progressive Enhancement<br />
Thanks<br />
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Upcoming SlideShare
Loading in...5
×

Optimize URL for Performance

2,485

Published on

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

No Downloads
Views
Total Views
2,485
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×