Understanding browser cache and browser cache

Understanding browser cache and browser cache
Browser caching, that is, client caching, is not only a provisioner for static resource optimization in web page performance optimization, but also an inevitable problem for countless web developers in their work processes. Browser cache is divided into: Strong cache and negotiated cache (1) Principle: 1. when a browser loads a resource, it first determines whether to use a strong Cache based on the Cache-Control in the http header of the resource. if it hits the resource, the browser directly reads the resource from the Cache and does not send a request to the server; 2. when the cache is not hit, the browser sends a request to the server, and determines whether the resource hits the negotiated cache through the Last-Modified and If-Modified-Since in the http header of the resource, if a request is hit, the server returns the request, but does not return the data of the resource. Instead, the server notifies the client that the resource can be loaded from the cache. 3. if the resource does not hit the negotiated cache, the browser loads the resource data directly from the server. (2) Similarities and Differences: 1. in common: If hit is hit, the resource is loaded from the client cache, but not from the server; 2. difference: a strong cache does not send requests to the server, and the request is sent to the server through negotiation. (3) The strong cache principle forces a strong cache, in the network of chrome The plane status is 200, and the size is displayed as from disk/memory cache. Cache Control: max-age: 315360000 in seconds, that is, 10 years. the browser requests a resource from the server for the first time. When the server returns this resource, it adds the Cache-Control header 2 to the respone header. after receiving the resource, the browser caches the resource together with all the resoponse headers. 3. when the browser requests this resource again, it searches for it from the Cache. After finding it, it calculates an expiration time based on its first request time and the validity period set by the Cache Control. Compare the expiration time with the current request time. If the current request time is earlier than the expiration time, it will hit the cache. Otherwise, it will not work. (4) Negotiation cache principle if the negotiation cache hits, the http status returned by the request response is 304 and a string Not Modified is displayed. The negotiated cache uses [Last-Modified, If-Modified-Since] 1. the browser requests a resource from the server for the first time. When the server returns the resource, it adds the Last-Modified header to the respone header, which indicates the Last modification time of the resource on the server; 2. when the browser requests this resource again with the server, it adds the If-Modified-Since header to the request header. The value of this header is the value of Last-Modified returned in the previous request; 3. when the server receives a resource request again, If-Modified-Since and whether the Last-Modified of the resource on the server has changed according to the browser, If no, 304 Not Modified is returned, however, the resource content is not returned. If there is a change, the resource content is normally returned. (5) how to clear the Client Cache 1. when ctrl + f5 force refreshes the webpage, it is loaded directly from the server, skipping the strong cache and negotiation cache; 2. when f5 refreshes the webpage, it skips the strong cache, but checks the negotiated cache. 3. if chrome is used, f12 can Disable the Disable cache in the network. 4. add a dynamic parameter to the resource, css/index.css? V = 2017032901