Internet articles - browser cache (a)

Internet articles - browser cache (a)

First, the cache type

• There are two strong cache and cache consultation

1. Strong Cache

   • It sends a request to the server will not be read directly from the cache resources;

2. Cache consultation

   • Sends a request to the server, the server will negotiate to determine whether a cache hit request header according to some parameters of the request, and if a hit, the status code 304 is returned and bring a new response header tells the browser to read the resource from the cache;

3. Differences and similarities

   • Common: all read the resource from the client cache;
   • Difference: Strong cache does not send the request, in consultation cache will send a request;

Second, and related to the cache header

1. Strong Cache

• Expires: response header in the expiration time (absolute time), the browser loads the resource again if at this time expires, the cache hit strong. expires: Wed, 16 May 2018 13:23:04 GMT;
• Cache-Control: When the value is set to max-age = 300, represents within 5 minutes of this request to return the correct time (the browser will be recorded) to load the resource again, it will hit the strong cache.

• Expires and Cache-Control similarities and differences:

  • Expires is http1.0 product, provided that the absolute date and time;
  • Cache-Control http1.1 product is provided max-age setting of relative time;
  • Both exist, Cache-Control priority than Expires

1. Cache consultation

• ETag和If-None-Match

  1. Etag is the last resource is loaded, the server returns the response header, is the one kind of unique identification of resources, as long as the resource changes, Etag will regenerate;
  2. The next time the browser sends a request to load the resource on the server, will be returned once Etag into the request header value in the If-None-Match, the server receives the value of the If-None-Match, it will bring with the Etag value of the resource file comparison, if the same, then the resource file is not changed, the cache hit consultations.

• Last-Modified和If-Modified-Since

  • Last-Modified is the last time the resource file changes, the server returns the response header, the browser will be saved while this value, the next time to send a request into request header in the If-Modified-Since, the server after receiving will do comparison, if the same cache hit consultations.

• Differences between negotiation cache:

  • The accuracy, Etag superior Last-Modified. Last-Modified time in seconds, if a file is changed several times in one second, then their Last-Modified fact is not reflected changes, but every time Etag changed to ensure accuracy;
  • In performance, to be inferior Etag Last-Modified, Last-Modified only after all the recording time, and requires a server Etag a hash value calculated by the algorithm;
  • On the priority, priority servers check Etag.

Third, the browser cache process

1. The browser first loads the resource, the server returns 200, the browser resource file downloaded from the server request and response header and the return time of the request together with the cache;
2. The next time the resource is loaded, to compare the current time and the last return time at 200 a difference, if not max-age than cache-control set is not expired, the hit strength buffer, does not send a request to read the file from the local cache (If your browser does not support HTTP1.1, to determine whether the use expires expired);
3. If the time expires, the server sends a header with the If-None-Match and If-Modified-Since request;
4. After the server receives the request, the priority is determined according to the file requested Etag values ​​do not have to modify, no modification Etag values ​​coincide, the cache hit negotiation, 304 return; if not, there are changes, the new resource file direct return belt new the Etag and returns the value 200;
5. If the request is not received by the server Etag value, the If-Modified-Since and last modification time of the requested documents do comparison, the agreement negotiated cache hit, returns 304; inconsistent new last-modified files and return and return 200;

Fourth, set the browser cache

1. Expires and cache-control setting by a HTML META

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Sun Oct 15 2018 20:39:53 GMT+0800 (CST)" />

• This method is only valid for the web pages of the Web for images or other request was invalid.

1. Pictures, css, js, flash cache

• The main technique to achieve this by configuring the server;

Fifth, the user control over the behavior of the browser cache

1. Address bar to access, links to jump is normal user behavior, will trigger the browser cache mechanism;
2. F5 refresh browser provided max-age = 0, skip determination strong cache, the cache determination negotiates;
3. ctrl + F5 refresh, skip the cache and strong negotiation cache, pulling resources directly from the server