Summary:

The browser caching mechanism is also the HTTP caching mechanism

HTTP packets are classified into request and response packets

Cache implementation

  1. Client specification

    Request The request header carries cache-control. The server reads the cache-control field and sets the response header cache-control field. The browser sets the cache based on the cache-control of the response headerCopy the code

  2. Server specification

    The server proactively sets the response header cache-control field. The browser receives the response header and sets the cache based on cache-controlCopy the code

Cache-related header fields:

1. expires  
2. cache-control  
3. Last-Modified  
4. If-modified-since  
5. Etag  
6. If-none-match
Copy the code

Cache storage location:

In the browser,js and IMG files are stored in the memory cache. 2. From disk cache: Disk memory The CSS is stored in the disk cacheCopy the code

Cache classification:

  1. Strong cache

    Corresponding header field:

    • HTTP1.0: Expires

      Value is the expiration time of the result cache for the server to return the request. That is, when the client sends the request again, if the time is shorter than the Expires value, the cached result is used directly.Copy the code

    • HTTP1.1: cache-control (high priority)

      Values: (1) public: all content will be cached (both client and proxy servers can Cache) (2) private: all content can be cached only by clients, the default value of cache-control (3) no-cache: (5) max-age= XXX (XXX is numeric) : the cached content will expire after XXX secondsCopy the code

    Cache-control is used when cache-control expires. Cache-control is used when cache-control expires

  2. Negotiate the cache

    Corresponding header field:

    • HTTP1.0: last-modified && if-modified-since

      If the client modifies the time, a problem may occur. The time is accurate to seconds, which is not accurate enough. If no modification is made, the time will be different even if it is changedCopy the code

    • HTTP1.1 ：Etag && If-None-Match

      (Resource identifier. When requesting the resource, the server compares this field and returns the new resource code 200 if there is any change. If there is no change, the new resource code 304 is returned.)Copy the code

    A negotiated cache is used when there is no cache-control field or the cache time has expired

Cache Process Analysis

The first time the browser requests a resource from the server, the cache is set according to the cache field in the server response header. So the next time you make a request, depending on the cache field, whether you want to read the local cache or whether you want to make a request to the server and the server decides whether you want to return a new resource and the browser caches the resource and last-Modified, On the next request, the eTag is put into if-none-match and last-modified into if-Modified-since, and sent to the server, which checks whether the eTag and last-Modified have changed and decides whether to return the resource or read the cacheCopy the code