1.
www.devoxx.com

2.
Caching web contents in the browser <ul><li>Nacho Coloma </li></ul><ul><li>Java Architect </li></ul><ul><li>Extrema Sistemas de </li></ul><ul><li>Información </li></ul>

3.
Overall Presentation Goal <ul><li>Learn to think like the browser </li></ul>

4.
Speaker’s qualifications <ul><li>Nacho Coloma is a Java Architect at Extrema Sistemas de Información </li></ul><ul><li>Since 1999 Nacho has designed air traffic systems, e-banking platforms, Document Management Systems and a full load of enterprise applications </li></ul><ul><li>… during which he has dealt with browsers more than he would like to :) </li></ul>

5.
Ye olde cache <ul><li>We tend to avoid what we do not understand. </li></ul>Source: http://www.sawse.com/

6.
<ul><li>304 (Not Modified) responses </li></ul><ul><li>Expires headers </li></ul><ul><li>Strong and weak cache indicators </li></ul>Three things to know

7.
<ul><li>Means “the browser already has the latest version of this file” </li></ul><ul><li>Will happen with every click unless Expires is used </li></ul>304

8.
<ul><li>If the server includes Last-Modified the browser will include If-Modified-Since with each further request </li></ul><ul><li>Example: any static file with tomcat </li></ul>304 with Last-Modified Browser Server <No header> Last-Modified: Fri, 02 Nov 2007 00:36:01 GMT If-Modified-Since: Fri, 02 Nov 2007 00:36:01 GMT 200 OK / 304 Not Modified First request Subsequent requests

9.
<ul><li>If server includes ETag the browser will include If-None-Match with each further request </li></ul><ul><li>Example: <inode>-<file-size>-<last-modified> with apache </li></ul>304 with ETag Browser Server <No header> ETag: 2e88051-8c-43f0b6dd972c0 If-None-Match: 2e88051-8c-43f0b6dd972c0 200 OK / 304 Not Modified First request Subsequent requests

10.
<ul><li>Indicates for how long the file should not be retrieved again. </li></ul><ul><li>Cache-control (max-age) </li></ul><ul><ul><ul><li>http 1.1 </li></ul></ul></ul><ul><ul><ul><li>seconds to expire </li></ul></ul></ul><ul><ul><ul><li>used by the browser </li></ul></ul></ul>Expires header Browser Server <No header> Expires: Mon, 15 Dec 2008 19:11:50 GMT Cache-Control: max-age=1209600 (No more requests until the resource expires) First request Subsequent requests <ul><li>EExpires </li></ul><ul><ul><ul><li>http 1.0 </li></ul></ul></ul><ul><ul><ul><li>Date </li></ul></ul></ul><ul><ul><ul><li>used by proxies installed by The Roman Empire. </li></ul></ul></ul>

11.
<ul><li>Refresh : a new request will be sent for each file, ignoring the Expires header. </li></ul><ul><ul><ul><li>Any If-Modified-Since or If-None-Match headers will be sent. </li></ul></ul></ul><ul><ul><ul><li>The server may return a 304 response. </li></ul></ul></ul><ul><li>Shift + Refresh : a new request will be sent for each file, ignoring the Expires header. </li></ul><ul><ul><ul><li>Any If-Modified-Since or If-None-Match headers will not be sent . </li></ul></ul></ul><ul><ul><ul><li>The server cannot return a 304 response. </li></ul></ul></ul>The Refresh button

12.
<ul><li>Weak : Last-Modified, default ETag implementations. </li></ul><ul><li>Strong : MD5, version numbers </li></ul><ul><li>Strong indicators can be inserted in the URL or used as ETag headers </li></ul>Weak and strong indicators

13.
<ul><li>Version numbers </li></ul><ul><ul><ul><li>http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js </li></ul></ul></ul><ul><ul><ul><li>http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css </li></ul></ul></ul><ul><li>Revision numbers </li></ul><ul><ul><ul><li>http://localhost/myentity?id=5&revision=20 </li></ul></ul></ul><ul><li>MD5 </li></ul><ul><ul><ul><li>http://localhost/images/photo.gif?checksum=9e0bee8ace86b2230140642adcf57c4c </li></ul></ul></ul>Strong indicators

14.
<ul><li>Using strong indicators, you can set your Expires header to cache forever: </li></ul><ul><ul><ul><li>HTTP spec : 1 year </li></ul></ul></ul><ul><ul><ul><li>Yahoo! recommendation: 10 years </li></ul></ul></ul><ul><li>Use only with immutable resources </li></ul>Expires & strong indicators

15.
DEMO <ul><li>You can try this yourself: </li></ul><ul><li>Go to </li></ul><ul><li>http://loom.extrema-sistemas.com/loomdemo/ </li></ul><ul><li>Look the javascript file names that are retrieved; recognize the MD5 hash. </li></ul><ul><li>Look the files downloaded for the first and further requests (use LiveHttpHeaders or Firebug) </li></ul><ul><li>Click Refresh and see what happens </li></ul>

16.
Summary <ul><li>The browser will ask for every resource unless you specify an Expires header </li></ul><ul><li>You may return 304 responses </li></ul><ul><li>You can use strong and weak cache indicators, in the URL or as HTTP headers </li></ul><ul><li>With strong cache indicators, you can cache immutable resources forever. </li></ul>

17.
Improve your performance! <ul><li>Set your goal to < 1 sec per request </li></ul>

18.
Q&A

19.
Thanks for your attention <ul><li>Nacho Coloma </li></ul><ul><li>[email_address] </li></ul><ul><li>http://icoloma.blogspot.com </li></ul>Source: http://www.sawse.com/ http://www.extrema-sistemas.com/