All the code in this article uses a simple server built with Express

Web cache description:

A Web cache is an HTTP device that automatically saves copies of common documents. When the Web request reaches the cache, if there is a “cached” copy locally, the document can be extracted from the local storage device instead of the original server. (This conclusion comes from the authoritative HTTP guide.)

Advantages and disadvantages of caching:

Advantages:

  • Caching reduces redundant data transfers and saves you money on your network.
  • Caching relieves network bottlenecks. Pages load faster without requiring more bandwidth.
  • Caching reduces the requirements on the original server. The server can respond more quickly and avoid overloads.
  • Caching reduces distance latency because it is slower to load pages from farther away.

Disadvantages:

  • The data in the cache may be inconsistent with the data on the server;
  • Memory consumption;
Overview of cache validation:
Caches can be divided into strong cache and negotiated cache.











Difference between from memory cache and from Disk cache

From the memory cache: Literally from memory, also is the literal meaning, actually this is directly from the memory resources, general won’t request to the server has been loading the resource and cached in memory, when close the page, this resource to be released down to memory, once again back on the same page won’t appear the from the memory cache

From disk cache: Similar to the above, this resource is fetched from disk, which has been loaded at a previous time. The server is not requested, but this resource will not be released with the closure of the page, because it is stored in the disk. The next open will still be from disk cache. Blog.csdn.net/garrettzxd/…).

Here are four ways caching can be implemented

Strong cache

Strong caching is divided into Expires and cache-control

Expires, which is a string in the GMT format. The first time the browser makes a request, the server returns an Expires header. The next request, if it hits the cache before that time,


app.get('/', (req, res) => {
    const cssContent = path.join(__dirname, './html/index.html');
    fs.readFile(cssContent, function(err, data) {
          res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString()); res.end(data); })});Copy the code

Cache-control, which uses max-age to determine the Cache life cycle in seconds. How to hit the Cache within the life cycle time

app.get('/', (req, res) => {
    const cssContent = path.join(__dirname, './html/index.html');
    fs.readFile(cssContent, function(err, data) {
        res.setHeader("Cache-Control"."max-age=0"); res.end(data); })});Copy the code

Hit cache:

Negotiate the cache

The negotiated cache is implemented using last-modified, if-Modified-since, and ETag, if-none-match
Last-Modified , If-Modified-Since

Last-modified: indicates the entity header, and response is returned, indicating the Last update time of the resource if-modified-since: By comparing the two times to determine whether the resource has been Modified during the request period, if not, the negotiated cache is hit, and the browser reads the resource from the cache. If not, the resource has been Modified, and the new Last-Modified time and the server resource are returned

    app.get('/', (req, res) => {
    const cssContent = path.join(__dirname, './html/index.html')
    fs.stat(cssContent, (err, start) => {
        if (req.headers['if-modified-since'] === start.mtime.toUTCString()) {
            res.writeHead(304, 'Not Modified');
            res.end();
        } else {
            fs.readFile(cssContent, function (err, data) {
                let lastModified = start.mtime.toUTCString();
                res.setHeader('Last-Modified', lastModified);
                res.writeHead(200, 'OK'); res.end(data); })}})});Copy the code
ETag , If-None-Match

In some cases, it is not enough to verify whether a resource has been changed only by judging the last modification date: 1. Some resources are periodically rewritten, but the actual content of the resource does not change; 2. The modified information is not important, such as comments, etc. 3. Last-modified is not accurate to the millisecond, but some resources are sometimes updated less than a second. ETag: the corresponding header field, representing the unique identifier of the resource content, is returned with the server response. If-none-match: The server compares if-none-match in the request header with the eTAG in the current resource to determine whether the resource has been modified. If the Match is not modified, the browser reads the resource from the cache. If the Match is modified, the server returns the new Etag and the resource.

app.get('/home', (req, res) => {
    const cssContent = path.join(__dirname, './html/index.html')
    fs.stat(cssContent, (err, start) => {
        let etag = md5(cssContent);
        if (req.headers['if-none-match'] === etag) {
            res.writeHead(304, 'Not Modified');
            res.end();
        } else {
            fs.readFile(cssContent, function (err, data) {
                res.setHeader('Etag', etag);
                res.writeHead(200, 'OK'); res.end(data); })}})});Copy the code

It is not recommended to use an Expires header, which specifies the actual expiration date, not the number of seconds. HTTP designers later decided that since many servers’ clocks were out of sync or incorrect, it was better to use the remaining seconds rather than the absolute time to indicate expiration.

ETag is a more secure solution to last-Modified use of a resource where the timestamp of the resource changes but the content remains the same, or if the resource changes within a second but the last-Modified resource remains the same.

Add: due to the browser Cache policy, Expire and cache-control use of return, back, and F5 refresh will skip the local Cache and fetch data from the server each time.