Optimize URL for Performance

  • Published on
    12-May-2015

  • View
    2.417

  • Download
    0

Embed Size (px)

Transcript

<ul><li>1.Optimize URL for Performance<br />@morgancheng<br /></li></ul> <p>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. Googles 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. Dont 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 Doesnt 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 />page one<br />page two<br />31. Step 2: Add JavaScript<br />page one<br />page two<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. Dont Over Cache<br />36. 37. {<br />http://mustache.github.com/<br />38. Graceful Degradation vs.Progressive Enhancement<br />39. Thanks<br /></p>