Your SlideShare is downloading. ×
0
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
Optimize URL for Performance
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Optimize URL for Performance

2,447

Published on

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

No Downloads
Views
Total Views
2,447
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
17
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×