What is?

The browser cache is automatically stored by the browser, and cache problems are often encountered during development, requiring manual cleaning of the cache

Cache type

Browsers have two types of cache:

  • Memory cache
  • Hard disk cache

From memory cache

A word, as its name suggests, is a cache that exists in memory

Features:

  • Fast reads: Memory caches store compiled and parsed files directlyMemory for the process, occupies certain memory resources of the process, which is convenient for quick reading next time
  • Timeliness: The memory cache has a very short duration. Once a process is shut down, its memory will be emptied synchronously

From disk cache

The word, as its name suggests, is the cache that exists on the hard drive

Features:

  • Read slow: as we learn hardware knowledge, hard disk speed will be low memory a lot, so read slow
  • Timeliness: The hard disk cache has a high timeliness. The cache is directly saved to the hard disk and will become invalid only after it is deleted or expires

Matching priority

The browser cache sequence is from memory cache → From Disk cache

  1. To find the memory
  2. Find the hard disk
  3. Network request
  4. Cache to hard disk or memory

A little knowledge

  • Normal JavaScript code exists inMemory cacheBecause Js scripts can run at any time, such as when you click a button
  • General CSS code exists inHard disk cacheBecause the cascading style sheet loads once and renders the page

Mandatory cache

A forced cache can also be called a strong cache. As its name suggests, once the data is cached in the browser, the browser reads the browser cache and does not request the server again until the cache is deleted or the mandatory cache expires.

Three cases of forced caching

The force cache looks up the result of the request to the browser cache and decides whether to use it based on the cache rules

  • The cache does not existCache the results 和 The cache idTo force cache invalidation and send requests directly to the server
  • Exists for the cacheCache the results 和 The cache id, but the result is invalid
  • Exists for the cacheCache the results 和 The cache id, and the result is not invalid, force the cache to take effect, and directly return the result

Force caching of corresponding fields

  • Expires (HTTP1.0)
    • The expiration time is controlled by time
    • The time returned by the server may be incorrect due to different time zones
  • Cache-control (HTTP1.1)
    • The expiration time is controlled by the duration
    • And local cache time and duration control, not affected by the time zone
    • Value:
      • Public: All content will be cached (client, proxy)
      • Private: All content can only be cached by the client (default)
      • No-cache: no mandatory cache is required
      • No-store: All content is not cached, that is, neither mandatory cache nor negotiated cache is used
      • Max-age = XXX (XXX is numeric) : The cache contents will expire after XXX seconds

You can see:

  • In an HTTP response, Expires is an absolute value
  • The value of cache-control in the HTTP response packet is relative

Cache-control has a higher priority than Expires. The Cache is directly cached based on the cache-Control value. If a request is made again within 600 seconds, the Cache result is used to force the Cache to take effect.

Negotiate the cache

As its name suggests, negotiated cache means that each request is also negotiated with the server. The negotiation cache returns a cache id on the first request, the cache ID is compared with the server on the second request, and the cache is used if there is no update.

Two cases of forced caching

  • Negotiation Cache takes Effect
  • Negotiation cache failure

Negotiation cache corresponding fields

Etag/if-none-match has a higher priority than last-modified/if-modified-since, and only Etag/if-none-match takes effect.

  • Last-Modified / If-Modefied-Since
    • Low priority
    • Last-Modified
      • When the server responds, it returns the last modification time for the resource
    • If-Modefied-Since
      • When the client requests, it carries the last modification time of the last request, and the server compares it
        • If the value is less than the last modification time of the server, return 200 and return the requested resource
        • If the value is less than the last modification time of the server, return 304 and continue using the cache
  • Etag / If-None-Match
    • High priority
    • Etag
      • The unique identity of the generated resource returned when the server responds
    • If-None-Match
      • When a client requests, it carries a unique identifier that the server compares
        • If it is different from the server, 200 is returned and the requested resource is returned
        • If it is the same as the server, return 304 and continue using the cache