What are browser caches?

  • Strong cache: When we access a URL, we don’t send a request to the server, we read the resource directly from the cache, but we return a status code of 200
  • Negotiation cache:
  • Cache location: Service Worker –> Memory Cache –> Disk Cache –>Push Cashe

1 strong cache

How to set up strong cache?

1) When we first enter the page and request the server, the browser will use the Respone header to determine whether to cache the resource. If the response header contains expires,pragma, or cache-Control fields, which represent strong caching, Resources are cached in the memory cache or disk cache.

2) On the second request, the browser determines the request parameters and directly returns the status code if it meets the cache conditions200Fetch data from the local cache. Otherwise, the response parameters are stored in the request header to see if they match the negotiation cache and return the status code304To return to a new resource

Correlation request header

  • Expires: Is a field that HTTP1.0 controls the web page cache. The value is a timestamp, Greenwich Mean time. Disadvantages: Expiration is determined by local time

  • Cache-contral: specifies the Cache field in HTTP1.1. Cache-contral has a higher priority

  1. Private: the browser can cache, but the intermediate proxy server cannot cache
  2. No-cache: skips the current strong cache and sends HTTP requests to the negotiation cache
  3. No-store: does not cache in any form
  4. S-maxage: Similar to max-age, except that s-maxages are the cache times for proxy servers

2 Negotiation Cache

What is negotiated cache?

  • last-modify/if-modify-since

1) When the browser requests a resource for the first time, last-modify is added to the header returned by the server. Last-modify is a time that identifies the time when the resource was Last modified.

2) When the browser requests the resource again, the request header contains if-modify-since, which is the last-modify returned before the cache. After receiving if-modify-since, the server determines whether the resource matches the last modification time

  • ETag/if-None-Match

Unlike last-modify/if-modify-since, Etag/if-none-match returns a check code. Etag ensures that each resource is unique, and changes in resources lead to changes in Etag. The server determines whether the cache is hit based on the if-none-match value sent by the browser