Transcript ppt - CS193H: High Performance Web Sites

CS193H:
High Performance Web Sites
Lecture 17:
Rule 14 – Make Ajax Cacheable
Steve Souders
Google
[email protected]
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
minify JavaScript
avoid redirects
configure ETags
most important
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, mustrevalidate
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?