Web front-end performance optimization_caching mechanism, cache diagram


1. Cache understanding

  • Cache definition:
    • The browser stores the data previously requested by the user on the local disk. When the visitor needs to change the data again, there is no need to send the request again, and the data is directly obtained from the browser locally.
  • The benefits of caching:
    • Reduce the number of requests
    • Save bandwidth and avoid wasting unnecessary network resources
    • Reduce server pressure
    • Improve the loading speed of browser web pages and improve user experience

2. Cache Classification

  • Strong cache
    • Will not send requests to the server, get data directly from the local cache
    • The status code of the requested resource is: 200 ok (from memory cache)
  • Negotiation cache
    • Send a request to the server, and the server will judge whether it hits the negotiation cache based on the resources in the request header
    • If it hits, it returns a 304 status code to notify the browser to read the resource from the cache

The common point of strong caching & negotiation caching
  is to read resources from the browser side

The difference between strong caching VS negotiation caching
  Strong caching does not send a request to the server
  Negotiation caching sends a request to the server, and decides whether to use caching based on the information returned by the server

3. Schematic diagram of cache usage

Cache diagram

4. Header parameters in the cache

1. Strong cache header parameters

  • expires:
    • This is the specification at http1.0; its value is an absolute time GMT format time string, for example Mon, 10 Jun 2015 21:31:12 GMT, if the time of sending the request is before expires, then the local cache is always valid, otherwise it will send the request to the server to get it Resources
  • cache-control:max-age=number
    • This is the header information that appears in http1.1. It is mainly judged by the max-age value of this field. It is a relative value; the first request time of the resource and the validity period set by Cache-Control are calculated. Resource expiration time, and then compare this expiration time with the current request time. If the request time is before the expiration time, the cache can be hit, otherwise it will not work.
    • Commonly used values ​​of cache-control (just a simple understanding):
      • no-cache: Do not use local cache, need to use negotiation cache. First confirm with the server whether the returned response has been changed. If there is an Etag in the previous response, the requested amount will be verified with the server, and if the resource is changed, the cache will be used.
      • no-store: Directly prohibit the browser from caching data. Every time a user requests the resource, a request will be sent to the server, and the complete resource will be downloaded every time.
      • public: Can be cached by all users, including end users and intermediate proxy servers such as CDN.
      • private: It can only be cached by the browser of the end user, and it is not allowed to be cached by relay cache servers such as CDN.

Note: When cache-control and Expires coexist, cache-control has a higher priority

2. Negotiate cached header parameters

Important: The server determines whether the cache resource is available for negotiation, so the client and the server must communicate through a certain identifier, so that the server can determine whether the requested resource can be cached and accessed

  • Last-Modified / If-Modified-Since: Both values ​​are time strings in GMT format
    • The browser requests a resource from the server for the first time. When the server returns the resource, it adds a Last-Modified header to the header of the responder. This header represents the last modification time of the resource on the server.
    • When the browser requests this resource from the server again, it adds If-Modified-Sincethe header to the request header. The value of this header is the value of Last-Modified returned in the previous request
    • When the server receives the resource request again, it judges whether the resource has changed according to the If-Modified-Since passed by the browser and the last modification time of the resource on the server. If there is no change 304 Not Modified, it will return, but the resource content will not be returned; if there is a change, The resource content is returned normally. When the server returns a 304 Not Modified response, the Last-Modified header will not be added to the response header, because since the resource has not changed, it Last-Modifiedwill not change. This is the response header when the server returns 304
    • After the browser receives the 304 response, it will load the resource from the cache
    • If the negotiation cache is not hit, when the browser loads the resource directly from the server, Last-Modified的Headerit will be updated when it is reloaded, and If-Modified-Sincethe Last-Modified value returned last time will be enabled on the next request.

  • Etag/If-None-Match
    • These two values ​​are the unique identification string of each resource generated by the server. This value will change as long as the resource changes
    • The judgment process is Last-Modified / If-Modified-Sincesimilar to

  • Last-Modified He Sheng Etag
    • The emergence of Etag in HTTP1.1 is mainly to solve several problems that are more difficult to solve in Last-Modified
    • Some files may be changed periodically, but their content does not change (only the modification time is changed). At this time, we do not want the client to think that this file has been modified and re-GET
    • Some files are modified very frequently, such as modification in less than a second (for example, N times in 1s), the granularity that If-Modified-Since can check is s-level, and this modification cannot be judged (or (Said that UNIX records MTIME can only be accurate to the second)
    • Some servers cannot accurately get the last modification time of the file


  • Using Etag can more accurately control the cache, because Etag is a unique identifier on the server side of the corresponding resource automatically generated by the server or generated by the developer.
  • Last-ModifiedAnd ETagcan be used together, the server will give priority to verification ETag, only if they are consistent, will continue to compare Last-Modified, and finally decide whether to return 304

Guess you like

Origin blog.csdn.net/qq_43562262/article/details/109017005