Browser and Website HTTP Cache

On April 1, 2014, in Other Online Technology, by James Liu

Last-Modified and HTTP-IF-MODIFIED-SINCE is the most common cache mechanism between browsers and web server. Usually, when we access one static html page, web server will return us one 200 HTTP response with Last-Modified information. Our browsers will keep this information and send it as a value of HTTP-IF-MODIFIED-SINCE in the http request header when we try to access the same url next time.

In the server side, it will check the resource last modified date with HTTP-IF-MODIFIED-SINCE value. If they are the same, it will return 304 HTTP Response. Otherwise, it will return the latest resource by 200 HTTP Response with a new Last-Modified value. Here is an example.

Let’s create a request by accessing aa.html page.

GET /aa.html HTTP/1.1 
Host: linux-test
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 
Accept: text/html,application/xhtml+xml,application/xml; 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Keep-Alive: 300 
Connection: keep-alive

After web server gets the request, it will return the resource with cache information.

HTTP/1.1 200 OK
Date: Thu, 05 Mar 2009 02:58:54 GMT 
Server: Apache/2.2.8 (Unix) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8e PHP/5.2.5 mod_apreq2-20051231/2.6.0 mod_perl/2.0.2 Perl/v5.10.0 
Last-Modified: Thu, 05 Mar 2009 02:56:12 GMT 
ETag: "8c296-7a-464564f956b00" 
Accept-Ranges: bytes 
Content-Length: 122 
Keep-Alive: timeout=5, max=100 
Connection: Keep-Alive 
Content-Type: text/html ...... 
//html content…… ......

From above http response, you can find the Last-Modified information. Now, let’s make the same request again.

GET /aa.html HTTP/1.1 
Host: linux-test 
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 
Accept: text/html,application/xhtml+xml,application/xml; 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Keep-Alive: 300 
Connection: keep-alive 
If-Modified-Since: Thu, 05 Mar 2009 02:56:12 GMT 
If-None-Match: "8c296-7a-464564f956b00" 
Cache-Control: max-age=0

Compare with http request header first time, we can find some new fields in http request header. We can find that If-Modified-Since value is the same as Last-Modified value in last http response header. When the server gets this request, it will check if the resource is modified since If-Modified-Since date. If not, it will return a 304 http response. When browser gets this instruction, it will decide to show the cache in front of us.

HTTP/1.1 304 Not Modified 
Date: Thu, 05 Mar 2009 03:01:37 GMT 
Server: Apache/2.2.8 (Unix) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8e PHP/5.2.5 mod_apreq2-20051231/2.6.0 mod_perl/2.0.2 Perl/v5.10.0 
Connection: Keep-Alive 
Keep-Alive: timeout=5, max=100 
ETag: "8c296-7a-464564f956b00"

So what will happen if we make some changes in aa.html? Here is the HTTP Response to answer this question. In the following http response header, it returns the latest content with a new Last-Modified date.

HTTP/1.1 200 OK 
Date: Thu, 05 Mar 2009 03:30:06 GMT 
Server: Apache/2.2.8 (Unix) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8e PHP/5.2.5 mod_apreq2-20051231/2.6.0 mod_perl/2.0.2 Perl/v5.10.0 
Last-Modified: Thu, 05 Mar 2009 03:30:06 GMT 
ETag: W/"8c296-76-46456ca4f43c0" 
Accept-Ranges: bytes 
Content-Length: 118 
Keep-Alive: timeout=5, max=100 
Connection: Keep-Alive 
Content-Type: text/html ...... 
//html content... ......

ETags and If-None-Match

ETags and If-None-Match is another way to check if the resource is modified. Different from Last-Modified and HTTP-IF-MODIFIED-SINCE, ETags and If-None-Match not only check the last modified date, but also check all attributes of this resource like md5 checking. In the above example, you can see ETags in steps2:

ETag: "8c296-7a-464564f956b00"

After we change the resource, the ETag is changed also:

ETag: W/"8c296-76-46456ca4f43c0"
 

Leave a Reply

Free WordPress Themes

Free WordPress Theme