Browser cache implementation principle

 

The browser cache stores files on the client. A good cache policy can reduce the usage of network bandwidth, increase the access speed, improve the user experience, and reduce the burden on the server. Therefore, it is necessary to understand its implementation principles to improve the performance of the website.
When a client requests the web server, the requested content can be obtained from the following places: Server, browser cache, or cache server. This depends on the page information output by the server. There are three cache statuses for page files.
1. Latest: Select the "Do Not cache" page, and obtain the latest content from the server each request.
2. Not expired: cache within a given period of time. If the user refreshes or the page expires, the request is sent to the server. Otherwise, the local cache will be read, which improves the browsing speed.
3. Expired: The old page. When requesting this page, you must obtain it again.

The cache status of the page is determined by the HTTP header. One is the browser request information and the other is the server response information. It mainly includes Pragma: No-cache, cache-control, expires, last-modified, and if-modified-since. Pragma: No-cache is defined by HTTP/1.0, and cache-control is set by HTTP/1.1.

Cache-Control Parameters

Cache-control: private/public responses are cached and shared among multiple users. Private responses can only be used as private caches and cannot be shared between users.
Cache-control: No-Cache: No Cache
Cache-control: Max-age = x: the cache time is in seconds.
Cache-control: Must-revalidate: If the page expires, it is obtained from the server.

Expires: Set the page expiration time displayed
Last-modified: The last modification time of the request object is used to determine whether the cache expires. This is usually generated by the file time information.
If-modified-since: The information contained in the request sent by the client indicates that the last modification date of the browser cache request object is used to compare with the last-modified of the server.

For example, there are four methods () in the IE settings to "check each access page". The user reloads or exceeds the expiration date, the browser will think that the page is outdated (it will send an additional if-modified-since information. if the page does not change, the server returns a 304 status not modified, instead of sending the entire page, which will be very fast, however, the server must generate a valid last-modified headers and the server time must be valid.

Response from a server without caching

HTTP/1.0 200 OK
Content-Type: text/html
Content-Length: 19662
Pragma: No-Cache
Cache-control: No-Cache
Server: roxen/2.1.185
Accept-ranges: bytes
Expires: Wed, 03 Jan 2001 00:18:55 GMT

Sometimes it is not safe to set only Pragma: No-Cache cache-control: No-Cache. You need to set the expiration time to the past time to ensure that the object is not cached.

Response from a server that allows caching

HTTP/1.1 200 OK
Date: Tue, 13 Feb 2001 14:50:31 GMT
Server: Apache/1.3.12
Cache-control: Max-age = 43200
Expires: Wed, 14 Feb 2001 02:50:31 GMT
Last-modified: Sun, 03 Dec 2000 23:52:56 GMT
Etag: "1cbf3-dfd-3a2adcd8"
Accept-ranges: bytes
Content-Length: 3581
Connection: Close
Content-Type: text/html

Cache-control: Max-age = 43200 indicates 12 hours of Cache

Let's look at a specific example of browser cache.
First request file
Request:
Getfile.html HTTP/1.1
Accept: image/GIF, image/X-xbitmap, image/JPEG, image/pjpeg, application/vnd. MS-PowerPoint, application/vnd. MS-Excel, application/MSWord, application/X-Comet ,*/*
Accept-language: En-US
Accept-encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
HOST: 24.5.203.101
Connection: keep-alive

Response:
HTTP/1.1 200 OK
Date: Tue, 13 Feb 2001 20:00:22 GMT
Server: Apache
Cache-control: Max-age = 604800
Last-modified: Wed, 29 Nov 2000 15:28:38 GMT
Etag: "1df-28f1-3a2520a6"
Accept-ranges: bytes
Content-Length: 10481
Keep-alive: timeout = 5, max = 100
Connection: keep-alive
Content-Type: text/html

The last-modified and etag are returned here. The two information is used to compare whether the files cached by the current browser are consistent with those cached on the server. If they are not consistent, the latest information is obtained, read the local cache.

Second request
Request:
Getfile.html HTTP/1.1
Accept :*/*
Accept-language: En-US
Accept-encoding: gzip, deflate
If-modified-since: Wed, 29 Nov 2000 15:28:38 GMT
If-None-Match: "1df-28f1-3a2520a6"
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
HOST: 24.5.203.101
Connection: keep-alive

Response:
HTTP/1.1 304 not modified
Date: Tue, 13 Feb 2001 20:01:07 GMT
Server: Apache
Connection: keep-alive
Keep-alive: timeout = 5, max = 100
Etag: "1df-28f1-3a2520a6"
Cache-control: Max-age = 604800

The IF-None-match information in the request is the etag of the first response, which is used to verify whether it is consistent with the etag of the current response. If the server returns not modified, the browser reads the local cache.

We can also use a dedicated cache server to improve performance. The principle is the same as that of browser caching. All browser requests will be responded by the cache server. The cache server can use its own cached files or obtain new files to respond to user requests. Therefore, the cache server will greatly improve the website performance.
Reference: http://www.webperformance.org/caching/caching_for_performance.htmlCreated by jecray