“This is the 8th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

HTTP cache

When we first go to a website. Our browser needs to load some resources than if HTML, CSS, IMG, JS... These resources must be loaded the first time. Some of you may think: If the second time you enter. Do we need to load these resources?Copy the code

The second time you don’t need to ask again

When we request the site a second time, we don't need to request the resources that the site already requested. In this case, we can use the resources that were requested the first time [these resources will be cached in our local area] and our site will respond quicklyCopy the code

Cache read order

I'm sure you're aware of the cache. Some smart thinking partners might ask the question does the cache read in a limited sell order? Also is there. 1==> Check the memory. If the memory exists, load it from the memory. 2==> If the disk is not found in the memory, load the disk. If the disk is found in the memory, load the disk from the disk. 3==> If the disk is not found, the network request is made. Loaded resources are cached to hard disk and memory; This is the cache read orderCopy the code

How to set the cache

Set [Response Headers] cache-control in Response Headers: If we do not want a file to be cached, we can set cache-control:no-cache so that the browser will not cache it. If we do not set cache-control; Again, no caching is required. The next time we go to request this site; Our browser checks whether max-age is expired. If max-age is expired, it will request again. If max-age is not expired, it will not request again, but directly use the local cache. I want to know!! The harsh truth is that caching is not set up on the front end. But the backend to set the cache after no, and the cache time.Copy the code

Negotiate the specific meaning of each identifier in the cache

Negotiated cache: When we send a request for the second time, the server will be notified of the requested resource and the change in the Status Code shown in General: 200 (from memory cache) Does not access the server, usually the resource has been loaded and cached in memory. Read the cache directly from memory. After the browser is closed, the data will not exist (the resource has been released). When the same page is opened again, the data from memory cache will not appear. Status Code: 200 (from disk cache) 200 (From Disk Cache) Does not access the server. The resource has been loaded at a previous time and is directly read from the cache from the hard disk. After the browser is closed, the data still exists. When you access the server, the size is displayed as the size of the actual resource. 304 Not Modified When you access the server, the server returns this status code. The data is then read from the cache. This has two request parameters in the request header: if-modified-since and if-none-match.Copy the code

Status Code: 200 change process

In Google Chrome, for example, we're going to clear the cache the first time we go to the Diggings site and we're going to use the js file as an example. ==>Status Code: ==>Status Code: =>Status Code: ==>Status Code: ==>Status Code: ==>Status Code: ==>Status Code: The xx time is the same as the second time and the third time. If the resource has changed, it is the same as the first time. That is, it has never been loaded. 200 (from memory cache) Status Code: 200 (from disk cache)Copy the code

The difference between memory cache and hard disk cache

So we talked about memory reads and hard disk reads. The from memory cache has the following characteristics: 1==> Fast read. The memory cache stores the compiled and parsed files directly into the process's memory. Occupy the process certain memory resources, to facilitate the next run when the use of fast read. 2==> Timeliness: 1==> The cache is directly written to the disk file. Reading the cache requires I/O operations on the disk file stored in the cache, and then the cache content is parsed again. Reading is complicated. It is slower than the memory cache. 2==> Timeliness: The cache timeliness is long and will not be released after the process is released. Unless the user manually deletes or the disk is damagedCopy the code

What files does the browser throw into memory? Which ones go into the hard drive?

For large files, a high probability is not stored in memory, and vice versa. If the current system memory usage is high, the files are stored on the hard disk first. In the browser, files such as JS and images are directly stored in the memory cache after being parsed, so you only need to read from the memory cache when refreshing the page. CSS files are stored in hard disk files (surprise no, surprise no), so each rendering page needs to be read from the disk cache.Copy the code

Why are js and IMG stored in memory and cached CSS stored on disk?

Style sheets are usually on hard disk, not cached in memory. Because CSS styles can be loaded once to render a web page. But scripts can be executed at any time. If the script is on disk, it needs to be fetched from disk to memory before executing the script. Such IO overhead is relatively large and may cause the browser to become unresponsive. Therefore, scripts are generally in memory.Copy the code

Different browser resource loading policies

In Firefox, there is no "from Memory cache" and "from Disk cache". In Chrome, there is "from Disk/Memory cache". But Firefox is all 304 status codes,Copy the code

Negotiate the identity in the cache

There are two types of logos: If the last-modified value is the same as the Last time we Modified the resource, the last-modified value is the same as the Last time we Modified the resource. If the last-modified value is the same as the Last time we Modified the resource, If you're using last-Modified, the key that we carry in the request header is if-modified-since and when the server sees that it's received, It compares the if-modified-since value to last-modified If yes, it's the latest resource, If no, it's not the latest resource ETag: the unique string that corresponds to the resource when we send the request, Will carry on the If - Node - match the logo If we carry the If - Node - match: XXXX and ETag values are equal If it is equal to that is the latest resources, whether the person is not the latest resource ps: If-modified-since [not visible in Google Chrome, visible in Firefox request header]Copy the code

The difference between last-Modified and ETag caches

Last-modified can only be accurate to the second level. If each generation is repeated, but our contents are the same, last-modified will return the Last time our file was Modified. That is, although our content is the same, the packaging time has changed. The browser will not read the local cache the second time, but will need the server to return the latest resource. ETag can determine whether the content of the file is the same, the content is the same, return 304, and use the cacheCopy the code