1 Introduction
What is browser cache?
Browser cache, when you initiate a request from the browser, according to different strategies , to the corresponding cache location to obtain corresponding resources.
So, we start in two ways, one strategy, and second cache location.
2 cache process analysis
A picture is worth a thousand words, let's explain the process by caching the map, based on this process, we will exercise different caching strategies.
From this figure may know: When we first request to the server, the server will return resources and decide whether to cache and cache rule. When the next request will go directly ask the browser cache when available. If not, the request to the server, and then identifies the request results and cache into the browser cache.
Flowchart is as follows:
3. caching policy
A Force Cache
What is mandatory cache: do not go to the resource request to the server, but access to resources directly in the browser, there are about two kinds of mandatory buffer
1.cache-control
When we first request to the server to access to resources, through the following steps
The browser will tell us, I do not have the cache you want, you should go to the server.
Browser requests a resource to the server, the server returns the resource at the same time, and in response the head of the representative set of caching headers to force the cache and cache options. Since the code reference to the following services:
const http = require('http')
const fs = require('fs')
http.createServer(function (request, response) {
if (request.url === '/get') {
const html = fs.readFileSync('test.html', 'utf8')
response.writeHead(200, {
'Content-Type': 'text/html'
})
response.end(html)
}
if (request.url === '/user/list') {
response.writeHead(200, {
'Content-Type': 'text/javascript',
'Cache-Control': 'max-age=100' // 浏览器缓存时间,
})
response.end('console.log("script loaded twice")')
}
}).listen(3000)
复制代码So after returning to the resources back to the browser, the browser will be based on cache policy, forced cache.
In the Cache-Control there are the following options:
2.Expires
Cache expiration time, specified expiration time of the access to resources, time is the specific point of time the server
So, if you modify the local time may result in a cache miss.
Comparison between the two:
Second, negotiation cache
What is negotiation cache: After forcing a cache miss, the server will carry identification server is not required to consult with the cache, if the server agree to use the cache, then return to 304, use the browser cache. As resources have been updated, the server does not agree with the use of the cache, it will be updated resource identification and return to the browser and return to 200.
1.last-modified 和 if-modified-since
When the first request of the server, the server will respond heads together
last-modified:Wed, 22 May 2019 03:53:42 GMT
If-Modified-Since HTTP request header is a standard label, when sending an HTTP request, the browser cache page was last modified sent together to the server, the server will last modified time is the actual file server Compare.
- If the same time, then returns an HTTP status code 304 (does not return the file contents), after receiving the client, directly to display the local cache file to the browser.
- If the time is not, it returns an HTTP status code 200 and the new file contents, after receiving the client will discard the old file, the new file is cached and displayed in the browser.
So, last-modified There are some drawbacks
- What kind of behavior is called the modified browser can not determine if, just open the local cache file, the browser will still result in Last-Modified is modified, the server can not lead to the same resource cache hit send. Return resources
- Because the Last-Modified only time in seconds, if not modified in the perception of time to complete the file, the server will think the resource is hit, will not return the correct resources.
Then there is no better solution then? of course.
2.ETag和If-None-Match
To solve the above problem, change with the etag and if-none-match
Etag is generated by the server, it returns a unique identifier, if they can prove that the only constant resource files are available. Only resource content changes, the Etag will regenerate . The next time the browser sends a request to load the resource on the server, will be returned once Etag into the request header value in the If-None-Match, the server only need to compare the If-None-Match client came with their own server whether on the resource ETag consistent, it can be a good resource to determine whether the terms of the relative client have been modified. If the server does not match the ETag found, then return directly to the package in the form of regular GET 200 new resources (including of course the new ETag) to the client; if ETag is consistent, then returned directly inform the client 304 directly you can use the local cache.
3. Comparison between the two
- First in accuracy, Etag superior Last-Modified.
- In the second performance, to be inferior Etag Last-Modified, Last-Modified only after all the recording time, and requires a server Etag a hash value calculated by the algorithm.
- On the third priority, priority servers check Etag
Reference article
In layman's language the browser cache mechanism
Reproduced in: https: //juejin.im/post/5ce9e3e3e51d455a68490ad4