Browser cache

Reference: front-end browser cache knowledge comb read this article is not clear cache, please hit me 😈 (there are eggs)

What are the benefits of caching?

  1. Relieve server stress by not having to request some data every time.
  2. To improve performance, opening local resources will definitely come faster than requesting the server.
  3. To reduce bandwidth consumption, there is only a small network consumption when we use caching, as explained below why opening local resources also causes network consumption.

Web Cache types

Database cache, CDN cache, proxy server cache, browser cache.

A browser cache is an area of memory and a hard disk used as a buffer for data transfer on the local computer, which is then used to temporarily store previously accessed information.

Overview of cache processing steps

  1. Step 1: receive the request message read by —— cache from the network
  2. Step 2: parse —— The cache parses packets and extracts urls and headers
  3. Step 3: Query the —— cache to see if a local copy is available, and if not, get a copy (and save it locally)
  4. Step 4: Freshness check —— cache to see if the cached copy is fresh enough, and if not, ask the server if there are any updates
  5. Step 5: Create response —— The cache builds a response message with the new header and cached body
  6. Step 6: Send —— The cache sends the response back to the client over the network
  7. Part 7: Logging —— Cache Optionally creates a log file entry to describe this transaction

Browser cache process: strong cache, negotiated cache

Strong cache

Strong caching is 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. How to set up strong cache? Through special HTTP cache-Control (HTTP/1.1) and Expires (HTTP/1.0+) headers, HTTP lets the original server append an “expiration date” to each document. Like the expiration date on a quart of milk, these headers indicate how long the content can be considered fresh.

Cache-control has a higher priority.

expires

HTTP1.0 controls the caching of web pages. The value is a timestamp, specifically Greenwich Mean time. The server returns the expiration time of the cache for the result of the request, meaning that the cache is used if the request has not expired, or the request is rerequested if it has expired. One drawback is that it uses local time to determine whether it is expired or not, and local time can be modified by itself.

cache-control

Is a field in HTTP1.1 that controls web page caching. The value can be:

  • Public: Resources can be cached by both clients and servers.
  • Privite: Resources can only be cached by clients.
  • No-cache: indicates that the client cache resources, but the cache is verified by negotiation cache.
  • No-store: no cache is used.
  • Max-age: cache expiration period, (set the number of seconds after the cache expires).

Negotiate the cache

How do I set up the negotiation cache?

Last-Modified / If-Modified-Since

Last-modified returns the time when the resource file was Last Modified on the server when the server responds to a request.

If-Modified-SinceIs returned with the last request when the client initiates the request againLast-ModifiedValue, which tells the server when the resource was last modified when it was last requested. The server received the request and found that the request header containedIf-Modified-SinceField will be based onIf-Modified-SinceIs compared with the last modification time of the resource on the server. If the last modification time of the resource on the server is greater thanIf-Modified-Since, the resource is returned with the status code200; Otherwise return304, indicates that the resource is not updated and the cache file can be used.

Etag / If-None-Match

An Etag is a unique identifier (generated by the server) that is returned to the current resource file when the server responds to a request.

If-None-MatchIs a unique identifier returned from the previous request when the client initiates the request againEtagValue, which tells the server the unique identifying value returned by the last request for the resource. When the server receives the request, it finds that the request header containsIf-None-Match, will be based onIf-None-MatchThe field value is associated with the resource in the serverEtagIf the value is consistent, the value is returned304, indicates that the resource is not updated, and the cache file continues to be used. If no, return the resource file with the status code200.

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

Impact of refresh on strong and negotiated caches

  1. When CTRL + F5 forces a page refresh, load directly from the server, skipping strong and negotiated caching.
  2. When F5 refreshes a web page, it skips the strong cache, but checks the negotiated cache.
  3. I’m going to write the URL in the browser’s address bar, and I’m going to press Enter and I’m going to find this file in the cache. (the) fastest

The cache location

The browser Cache is searched in order: Service Worker–>Memory Cache–>Disk Cache–>Push Cache.

1. Service Worker

A separate thread that runs behind the browser and is typically used for caching. To use the Service Worker, the transport protocol must be HTTPS. Since request interception is involved in Service workers, the HTTPS protocol must be used for security. The Service Worker’s cache differs from other built-in caching mechanisms in that it gives us control over which files are cached, how the cache is matched, and how the cache is read, and the cache is persistent.

2. Memory Cache

The cache in memory mainly contains the resources that have been captured in the current page, such as the styles, scripts and images that have been downloaded on the page. It is definitely faster to read data from memory than from disk. Although memory cache reads data efficiently, it has a short cache duration and will be released as the process is released. Once we close the Tab page, the cache in memory is freed.

3. Disk Cache

A Cache stored on a hard disk is slower to read, but everything can be stored on disk, compared to a Memory Cache in terms of capacity and storage timeliness. Disk Cache coverage is by far the largest of all browser caches. Based on the fields in the HTTP Herder, it determines which resources need to be cached, which resources can be used without being requested, and which resources have expired and need to be re-requested. And even in the case of cross-site, resources with the same address once cached by the hard disk will not be requested again. Most of the Cache comes from Disk Cache. Prefetch cache Prefetch is a method of preloading. Resources marked as Prefetch will be loaded by the browser at idle time.

4. Push Cache

Push Cache is HTTP/2 and is used when all three caches fail. It only exists in the Session, is released once the Session ends, has a short cache time (about 5 minutes in Chrome), and does not strictly implement the cache instructions in the HTTP header.

5. CPU, memory, and hard disk