One of the most important ways to optimize front-end performance is, of course, caching, which is of great help to the project. For example, when we visit a web page and use the page back function, we will find that the load is very fast, the experience is very good, this is the power of cache.

What is caching?

When we first visit a website, such as Juejin. Cn, the computer will download the pictures and data from the website to the computer, and when we visit the website again, the website will be directly loaded from the computer, which is the cache.

What are the benefits of caching?

1. Ease the pressure on the server by not having to request certain data every time.

2. Improve performance. Open local resources faster than the request to the server.

3. Reduce bandwidth consumption. When we use caching, there is only a small network consumption.

Web cache types: database cache, CDN cache, proxy server cache, browser cache.

The so-called browser cache is to open up a memory area in the local computer, and also open up a hard disk area as a buffer for data transfer, and then use this buffer to temporarily save the user’s previous access to information.

Browser caching process: strong caching, negotiated caching.

Browser Cache locations generally fall into four categories: Service Worker–>Memory Cache–>Disk Cache–>Push Cache.

1. 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 do I set up a strong cache?

The first time we go to the page, we ask the server, and the server responds, and the browser will decide whether to cache the resource based on the response Header. If the response Header has fields like Expires, Pragma, or cache-control, that means it’s strong caching, The browser then caches the resource in the memory cache or disk cache.

On the second request, the browser determines the request parameters and returns status code 200 directly if the strong cache condition is met to get the data from the local cache. Otherwise, the response parameters are stored in the Request header to check whether they conform to the negotiation cache. If yes, the status code 304 is returned. If no, the server will return new resources.

expires

HTTP1.0 controls the field in the web page cache. The value is a timestamp, Greenwich Mean time, and the server returns the expiration time of the cache as a result of the request. This means that when the request is sent again, if the expiration time has not expired, the cache will be used directly.

One drawback is that it is based on local time, which can be changed by itself.

Cache-Control

Cache-control is a field in HTTP1.1 that controls the Cache of web pages. If cache-control is present, cache-control has a higher priority.

Public: Resources can be cached by both the client and the server.

Privite: Resources can be cached only by clients.

No-cache: The client caches resources. However, whether to cache resources is verified by the negotiated cache.

No-store: No cache is used.

Max-age: indicates the cache expiration date.

Cache-control solves the Expires problem by using max-age relative time.

pragma

This is the field in HTTP1.0 that disables web caching. The value of no-cache is the same as the no-cache effect of cache-control.

2. Cache location

So we said strong caching and we’re going to put resources in memory cache and disk cache, so what resources are going to go in memory cache and what resources are going to go in disk cache?

Storage Resources such as images and web pages are cached in the Disk cache. Most resources such as OS cache files are cached in the memory cache. The specific operation browser is allocated automatically to see who’s resource utilization is not high to who.

You can see that the memory cache request time is 0ms, this is not amazing, let me sort this out.

Browser caches are searched in the following order: Service Worker–>Memory Cache–>Disk Cache–>Push Cache.

1. Service Worker

Is a separate thread that runs behind the browser and is generally used to implement caching. To use a Service Worker, the transport protocol must be HTTPS. Because request interception is involved in the Service Worker, the HTTPS protocol must be used for security. The Service Worker’s caching is different from the browser’s other built-in caching mechanisms in that it gives us the freedom to control which files are cached, how the cache matches, how the cache is read, and that the caching is continuous.

2. Memory Cache

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

3. Disk Cache

A Cache stored in a hard disk is slower to read, but can store everything on disk, which is better than Memory Cache in terms of size and time.

The Disk Cache has the largest coverage of any browser Cache. It uses the fields in the HTTP Herder to determine which resources need to be cached, which resources can be used without a request, and which resources have expired and need to be rerequested. And even in the case of cross-site, resources at the same address, once cached by the hard disk, will not be asked for data again. Most of the Cache is from the Disk Cache.

Memory cache is much faster than disk cache. For example: Fetching access files directly from a remote Web server may take 500 milliseconds (half a second), disk access may take 10-20 milliseconds, memory access may take 100 nanoseconds, and even more advanced, L1 cache access (the fastest and smallest CPU cache) can take 0.5 nanoseconds.

It’s amazing that we see a prefetch cache again. What is this?

Prefetch cache

Prefetch is displayed on the link tag, which will appear when the link is loaded again.

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 the content of HTTP/2 and is only used when none of the above three caches is hit. It exists only in sessions and is released once the Session is over. It is also cached for a very short time, around 5 minutes in Chrome, and it does not strictly implement the caching instructions in THE HTTP header.

5. CPU, memory, and hard disk

I’m talking about hard disk, memory, and for those of you who don’t have an intuitive idea about hard disk, memory.

CPU, memory and hard disk are the main components of a computer.

CPU: Abbreviation for central processing unit (CntralPocessingUit), also called processor. It is the computing and control core of a computer. The computer relies on THE CPU to calculate and control. Let each part of the computer work smoothly, play a coordinating and controlling role.

Hard disk: a device for storing data such as data and software. It has the characteristics of large capacity and no loss of data after power failure.

Memory: Is responsible for data exchange and processing between hardware such as hard disks and cpus. It is characterized by small size, fast speed, can be stored with power, no power empty, that is, the computer in the boot state memory can store data, after shutdown will automatically empty all the data.

3. Negotiate the cache

Negotiated caching is a process in which the browser sends a request to the server with the cache identifier after the strong cache is invalid, and the server decides whether to use the cache according to the cache identifier.

There are mainly two cases:

Negotiation cache takes effect, return 304

Negotiation cache invalid, return 200 and request result

How do I set the negotiation cache?

Last-Modified / If-Modified-Since

Last-modified is when the server responds to the request by returning the Last time the resource file was Modified on the server.

If-modified-since is a field that tells the server when the resource was Last Modified when the client made the request again with the last-modified value returned from the Last request. When the server receives the request and finds that the request header contains the if-modified-since field, the server will compare the value of the if-Modified-since field to the last time the resource was Modified on the server. If the last time the resource was Modified on the server is longer than the value of the IF-Modified-since field, the server will compare the value of the if-Modified-since field to the last time the resource was Modified on the server. Then the resource is returned with the status code 200. Otherwise, 304 is returned, indicating that the resource has not been updated and the cache file can continue to be used.

Etag / If-None-Match

An Etag is a unique identifier (generated by the server) that the server returns in response to a request for the current resource file.

If-none-match indicates that when the client initiates the request again, it carries the unique IDENTIFIER value returned in the last request. The value of this field tells the server the unique identifier value returned in the last request. After receiving the request, the server finds that the request header contains if-none-match, and compares the value of if-None-match 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 and the cache file continues to be used. If no, the resource file is returned with the status code 200.

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.

4. Cache scheme

Most current projects use this caching scheme:

  • HTML: negotiation cache;

  • CSS, JS, images: strong cache, hash file names.

5. Differences between strong cache and negotiated cache

1. The strong cache does not send requests to the server, so sometimes the browser does not know if the resource has been updated, but the negotiated cache will send requests to the server, so the server must know if the resource has been updated.

2. Most Web servers enable the negotiation cache by default.

6. Refresh the impact on the strong cache and negotiated cache

1. When CTRL + F5 forces a page refresh, the page is loaded directly from the server, skipping the strong cache and negotiation cache.

2. When f5 refreshes the web page, the strong cache is skipped, but the negotiated cache is checked.

3. Write the URL in the browser address bar and press Enter. The browser finds that the file is in the cache. (the) fastest