introduce

Caching is a common topic in Web development, and taking advantage of caching is a simple and efficient way to solve performance optimization problems. A good caching strategy can speed up web page loading, reduce latency, improve user experience and reduce bandwidth, cost, and network load.

For an HTTP request data, there are typically three phases: request, processing, and response, and browser caching can help optimize performance during the first and third phases. For example, if the data is cached locally and the request is not made, or if the request is made but the data stored in the back end is the same as the data stored in the front end, there is no need to pass the server data back, thus reducing the response data.

Cache type

  1. Memory cache: The memory cache contains the resources that have been downloaded from the page, such as scripts, styles, and images. Reading from memory is certainly faster than reading from disk, but the cache time is not very long and will be freed as the process is freed. Once we close the Tab page, the in-memory cache is freed.

  2. Disk cache: A cache stored on a hard disk. The read speed is slower than that of memory, but the storage capacity is larger than that of memory, and the cache time is longer.

  3. Prefetch cache: The browser uses preloader-related instructions (for example, ) to download resources. The browser can parse CSS/JS while the network requests the next resource. Preloader instruction is one of the common methods of page optimization.

Browsers are divided into forced caching and negotiated caching.

  1. Strong cache: reads resources directly from the local cache without making a request to the server. You can see in the Network panel of Chrome’s debugging tool that the request returns a status code of 200, and that Size does not display a specific number, but rather from Disk cache or from Memory cache. Strong caching can be achieved by setting two HTTP headers: Expires and cache-control.

  2. Negotiation cache: Negotiation cache is a process in which the browser sends a request to the server with the cache identifier after the mandatory cache is invalid. The server decides whether to use the cache according to the cache identifier.

The resources

  1. www.jianshu.com/p/54cc04190…