A, caching,
Advantages of caching:
- Reduces unnecessary data transmission and saves bandwidth
- Reduce server load and improve site performance
- Accelerated client loading web page speed
- User experience friendly
Disadvantages of caching:
- If the resource changes but the client is not updated in time, users will not be able to obtain information in time, if the old version has bugs, the situation is worse.
Cache type
In terms of browsers, the general Cache can be divided into four types. According to the priorities of browsers, the Cache is Memory Cache, Service Worker Cache, HTTP Cache, and Push Cache. This article focuses on HTTP Cache
Second, the HTTP Cache
HTTP Cache is one of the caches we work with most in development. It is divided into strong Cache and negotiated Cache. Strong cache: The browser directly caches the resource for the first time and caches the resource locally. The browser checks whether the resource has expired for the second time. If the resource has not expired, the browser directly uses the resource. Negotiation cache: the browser requests the cache for the first time and saves the cache id and time. If the request is repeated, the browser will request the server to verify whether the resource is updated. The server will judge by the cache ID and use the cache if the resource is not invalid. Resend the resource if it fails.
In general, strong caching is done, and negotiation caching is only used when strong caching fails.
| The cache | Status code | Request service unit |
|---|---|---|
| Strong cache | 200 (from memory cache) | No, cache access directly |
| Negotiate the cache | 304 | If yes, the server tells the browser whether the cache is available |
Strong cache
For strong caching, there are two fields in the response header to indicate the Expires rule (Expires/ cache-Control).
1.Expires
The Expires value is the expiration time returned by the server. If the request time is shorter than the expiration time returned by the server, the cached data is directly used. Expires is an HTTP 1.0 thing, and now the default browser uses HTTP 1.1 by default, so its role is largely ignored.
2.Cache-Control
The value can be private, public, no-cache, max-age, or no-store
| The values | role |
|---|---|
| private | The client can cache, but the proxy service does not |
| public | Both client and proxy servers can be cached |
| max-age=xxx | Cached contents will expire in XXX seconds |
| no-cache | Skip setting strong caching, but do not prevent setting negotiated caching |
| no-store | No caching, this will make the client and server do not cache, there is no so-called strong cache, negotiated cache |
| immutable | If requested, the resource is read directly from the cache, and no request is made to the server even if the user does a refresh operation |
3.pragma
Values include no-cache and no-store, which have the same meaning as cache-control and have a higher priority than cache-Control and expires. If all three occur together, pragma > Cache-Control > Expires is the first option.
Negotiation cache
For negotiated caching, there are two fields in the response header to indicate last-Modified/ETag.
1.Last-Modified
The last-Modified value indicates when the response resource was Last Modified. When the Web server responds to a request, it tells the browser when the resource was last modified.
When the resource is requested again, the request header will containIf-Modified-SinceField, the value of which was previously returnedLast-ModifiedValue of, as in:If-Modified-Since: Mon, 06 Jul 2020 06:27:10 GMT. The server will compare the last modification time of the field and the resource. If they are the same, it proves that the field has not been modified, and the browser can directly use the cache and return 304. If they are inconsistent, the Modified resource is returned and last-modified to the new value.
disadvantages
- As soon as an edit is made, regardless of whether the content actually changed, it is judged by the time of the last modification and returned as a new resource, resulting in an unnecessary request response, which is exactly what caching is supposed to do to avoid unnecessary requests.
- If-modified-since The time is accurate to seconds. Some files are Modified very frequently, such as in less than seconds (say N times in 1s), and the modification cannot be determined.
2.ETag
To solve the last-Modified problem, ETag was created
Each file has an ETag, which changes when the file is changed. It is a file hash, and each file is unique, just like when webpack is used, each resource has this thing, such as: App.js is packaged to be built.85d2fbbf33.js with a unique hash, also to solve the cache problem. In [webpack hash] [2]
The process of negotiating a cache
-
Send a request – > Check whether the resource is expired – > Expired – > Request server – > Compare the server to check whether the resource is truly expired – > Not expired – > Return 304 status code – > Old resources cached by the client.
-
Send a request – check whether the resource is expired – > Expired – > Request server – > Server compares whether the resource is really expired – > Expired – > Return 200 status code – > The client writes down max-age, etag, last-Modified, and so on in its cache-control as it received the resource for the first time.
When requesting a resource, the local ETAG of the resource is sent to the server for comparison with the latest resource. If the resource has not changed, 304 is returned and the browser reads the local cache. If the resource has changed, return 200 to return the latest resource.
5. Access refresh analysis
Access and refresh fall into three categories:
- Enter the tag, enter the URL and press Enter
- Press refresh button, F5 refresh, page right click “reload
- CTRL + F5 Force refresh
1. Enter the label, enter the URL, and press Enter
In this case, the cache policy will be determined based on the actual design.
- If you go strong cache first. Determines whether the cache expires based on cache-control, or returns 200(from cache) if not.
- If the local cache has expired and the negotiated cache route is adopted, the last-Modified value is compared with the server
- If there is no change after this time, read the local cache and return 304.
- Otherwise return the new resource, status code 200, and update the last-Modified value of the returned response.
2. Press the refresh button, F5 refresh, and right click “Reload”
In this case, the browser actually sets the max-age of cache-control to 0, allowing the cache to expire immediately and go directly to the negotiated cache route.
3. CTRL + F5 to refresh forcibly
In the case of forced refresh, the browser will force no-cache to fetch the latest resource, and other cache protocol fields such as if-modified-since will be eaten.
Six, summarized
Figure source
What happens when you manipulate a primitive array in a WEBGL JS loop? React ShoudComponentUpdate React ShoudComponentUpdate Stop rendering vue why don’t you use 11 methods for deep copy shallow copy Vue vue $nextTick Deep parsing Deep Revealing Promise microtask registration and execution Process How does the V8 engine execute a section of JS code? Http3.0 2.0 1.0 compare macro tasks and micro tasks in detail