CS193H High Performance Web Sites Lecture 17 Rule 14 by fso56144

VIEWS: 4 PAGES: 10

									          CS193H:
High Performance Web Sites
          Lecture 17:
Rule 14 – Make Ajax Cacheable

         Steve Souders
            Google
    souders@cs.stanford.edu
             announcements
11/17 – guest lecturer: Robert Johnson
  (Facebook), "Fast Data at Massive Scale -
  lessons learned at Facebook"
             Web 2.0, DHTML, Ajax
                         communities
                         rich UI
                         mashups

JS, CSS, & DOM
  used to modify
  the page
                      Asynchronous JS
                        and XML
                      layer between
                        data and UI
              Async == Instantaneous (?)
try Google Maps on dialup
passive Ajax requests
  in anticipation of user's needs
  e.g., download address book for webmail
active Ajax requests
  in response to user action
  e.g., email search request
  user is waiting; not instantaneous
  optimize these first
             Ajax optimizations
add an Expires header
gzip components
                        most important
minify JavaScript
avoid redirects
configure ETags
                 cache Ajax? Really?!
but...
  it's dynamic
     yes, but for this [user | time | browser] it's
     [always the same | doesn't change for awhile]
  it's data
     sometimes data doesn't change
  it's private
     :no-store doesn't always work
     should you use https?
              caching XHR vs. HTML
XHR and HTML often contain dynamic,
  personalized data
why can I cache XHR, but not HTML?
the URL for HTML is often frozen
  bookmarks
  cross-references
  prettier
  memorized
developers control what's in XHR URLs
  the XHR URL is contained inside the HTML
  the developer can modify the XHR URL with data to
    avoid a cache hit
               ex: Google Calendar
http://www.google.com/calendar/contacts
  HTTP/1.x 200 OK
  Cache-Control: no-cache, no-store, max-age=0, must-
    revalidate
  Pragma: no-cache
  Expires: Fri, 01 Jan 1990 00:00:00 GMT
  Content-Type: text/javascript; charset=UTF-8
  Content-Encoding: gzip
  Date: Mon, 10 Nov 2008 22:00:57 GMT
  Content-Length: 1562

solution:
  add modification timestamp to URL
  http://www.google.com/calendar/contacts_1226354800
                 Homework
11/12 3:15pm – Web 100 Double Check
  •   look at your rows in Web 100 spreadsheet
  •   double-check your entries for any rows in red
  •   update incorrect entries
  •   enter "y" in "Double Checked" column
              Questions
Which performance rules so far apply to Ajax?
What are passive Ajax requests? active?
Why may developers view the cacheability of
   Ajax responses differently than other content?
If I can cache XHRs, why can't I cache HTML that
   also contains dynamic data?

								
To top