Optimize URL for Performance

  • View
    2.418

  • Download
    0

Embed Size (px)

Text of Optimize URL for Performance

  • 1.Optimize URL for Performance
    @morgancheng

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