Optimize URL for Performance
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Optimize URL for Performance

on

  • 2,739 views

 

Statistics

Views

Total Views
2,739
Views on SlideShare
2,737
Embed Views
2

Actions

Likes
17
Downloads
31
Comments
0

2 Embeds 2

http://twitter.com 1
http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Optimize URL for Performance Presentation Transcript

  • 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. Google’s 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. Don’t 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 Doesn’t 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
    <a href=“/31415926”>page one</a>
    <a href=“/31415927”>page two</a>
  • 31. Step 2: Add JavaScript
    <a href=“/31415926”>page one</a>
    <a href=“/31415927”>page two</a>
    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. Don’t Over Cache
  • 36.
  • 37. {
    http://mustache.github.com/
  • 38. Graceful Degradation vs.Progressive Enhancement
  • 39. Thanks