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

Optimize URL for Performance

on

  • 2,691 views

 

Statistics

Views

Total Views
2,691
Views on SlideShare
2,689
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 Optimize URL for Performance Presentation Transcript

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