When we are browsing website, it always takes longer time to load the page in first time than that in second time. Sometimes it will take 5 seconds to download a file, but it may only take you 1 seconds for downloading the same file. It’s all because Browser cache and HTTP header fields. Cache mechanism is doing a good job to improve the HTTP service performance. By setting some cache fields in HTTP header, we can reduce the number of requests and save a lots of bandwidth as well. In the meantime, it will also improve the user experience with website by reducing the loading resource. Here is an common HTTP Response example:
HTTP/1.1 200 OK Date: Fri, 30 Oct 1998 13:19:41 GMT Server: Apache/1.3.3 (Unix) Cache-Control: max-age=3600, must-revalidate Expires: Fri, 30 Oct 1998 14:19:41 GMT Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT ETag: "3e86-410-3596fbbc" Content-Length: 1040 Content-Type: text/html
Let’s pay attention on this HTTP Response header. There are several parameters to indicate how long cache will be valid and how to validate the resource after they expires.
Expires: It is one of the most important HTTP header fields. It indicates how long this resource will expire. After it expires, browser will send a HTTP request to server to get this resource when user is loading the same page. When web server gets this request, it will check if the resource is modified. If it is ,web server will return a 200 HTTP response with the latest resource. Most of all browsers support this http header field. The value of it is a absolute GMT time.
Cache-Control:It is introduced in HTTP 1.1. By setting this HTTP header field, web server will tell browsers how to handle the cache. Browsers will decide enable or disable the cache, how to cache, how to validate cache resource, and how to renew the cache. There are several value options:
- max-age=[sec] The maximum valid duration, in second. Similar to Expires, it will tell the browser after how many seconds the resource will expire.
- public It will indicate the browser should cache this resource, even it is a form.
- no-cache It will force browser to validate the cache content with the server before using it. Check this about how to validate a resource via http
Last-Modified: It shows the last modification date of the resource on the server. It works with HTTP_IF_MODIFIED_SINCE to validate the resource.
ETag: It is an entity tag for the resource. You can consider it as a hashcode, which can validate if the resource is modified. It works with If-None-Match or If-Match.