The cache

  1. What is a cache?

Is a simple and efficient way to optimize performance. A good caching strategy can shorten the distance of web page request resources, reduce latency, and reduce bandwidth and network load because cached files can be reused

  1. Cache categories HTTP cache and browser cache

Browser cache

Cookie LocalStorage SessionStorage applicationCache LocalStorage large capacity (WebSql and Index) round-trip cache (BFCache)Copy the code

HTTP cache

The browser environment is based on the cache identity of HTTP packets. For the first request, the browser determines whether to cache the result and the cache ID based on the CACHE ID of the HTTP header in the response packet. For n+ requests, the browser searches for the result and the cache ID.Copy the code

Extension: HTTP packet:

  • Request the request:

    Request line HTTP header (generic information header Request header entity header) Request body

  • The response response:

    Status line HTTP header (generic message header response header entity header) Response body

Cache results:

The browser resource size is of type from cache, and the request response status is 200 or 304.Copy the code

Strong cache

Look up the result of the request to the browser and decide whether to use caching based on the rules of caching. The fields that Control strong caching are Expires and cache-control, where cache-conctrol has a higher priority than Expires

Results:

  1. The cache result and cache id are not present and the request is sent directly
  2. Cache and cache id exist, but invalid, negotiation cache is used
  3. Cache and cache identifier exist, not invalid, use cache, return cache result directly

Expires

HTTP/1.0 Controls the web page cache field, starting with the expiration time of the result cache returned by the server for this request (problem: client and server time inconsistency)Copy the code

Cache-Control

Public private no-cache no-store max-age= XXX (XXX is numeric)Copy the code

Note: Memory cache (from memory cache)

Negotiate the cache

Negotiation cache is a process in which the browser sends a request to the server with the cache id after the cache is invalid. The server decides whether to use the cache based on the cache ID. The negotiation cache is controlled by the following fields: Last-modified/if-modified-since and Etag/if-none-match, where Etag/if-none-match has a higher priority than last-modified/if-modified-since.

Results:

  1. Negotiation cache takes effect, return 304
  2. Failed to negotiate cache, return 200 and request result

Last-Modified / If-Modified-Since

Last-modified: Indicates the time when the resource file was Last Modified on the server when the server responds to the request. If-modified-since: When the client initiates the request again, it carries the last-Modified value of the Last request and tells the server the Last modification time of the Last request. After receiving the request, the server finds that the request header contains the if-Modified-since field. The server compares the value of the if-Modified-since field with the last modification time of the resource on the server. If the last modification time of the resource on the server is greater than the value of the if-Modified-since field, the server compares the value of the if-Modified-since field with the last modification time of the resource on the server. The resource is returned with the status code of 200. Otherwise, 304 is returned, indicating that the resource is not updated and the cached file can continue to be usedCopy the code

Etag / If-None-Match

Etag: indicates the unique identifier of the current resource file returned by the server when the server responds to the request (generated by the server). If-none-match indicates that the client sends the request again with the unique Etag value returned by the last request. This field tells the server the unique identifier returned by the last request. After receiving the request, the server finds that the request header contains if-none-match. The server compares the if-none-match field with the Etag value of the resource on the server. If the value is consistent, 304 is returned, indicating that the resource is not updated. If they are inconsistent, the resource file is returned with the status code 200Copy the code