• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Optimize URL for Performance
 

Optimize URL for Performance

on

  • 2,591 views

 

Statistics

Views

Total Views
2,591
Views on SlideShare
2,589
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