当前位置：网站首页>HTTP cache policy, strong cache, negotiation cache

HTTP cache policy, strong cache, negotiation cache

2022-07-22 05:37:00 【Nineteen (drag on and on)】

HTTP Cache policy , Strong cache , Negotiate the cache

List of articles

1： The test file

Server side app.js：

let http = require('http');
let fs = require('fs');
let url = require('url');
let path = require('path');

http.createServer(function (req, rep) {
    

    let pathname = url.parse(req.url).pathname;
    
    let data = fs.readFileSync(path.normalize(__dirname + pathname,'utf-8'));

    rep.end(data);
})
.listen(9090);

Here, first get the request url , Then find the file by splicing the path , Your file may not be here .

You can also directly let data = fs.readFileSync(‘./test1.jpg’,'utf-8')); stay app.js Find the corresponding file relative to the directory .（ Here is the use of synchronous read files ）

And then execute node app.js Start our server .

Client side index.html：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="http://localhost:9090/test1.jpg" alt="test">
</body>
</html>

The directory looks like this ：

Insert picture description here

2： Strong cache

2.1：Expires

Your format should look like this ：Expires: Sun, 17 Jul 2022 14:10:48 GMT

http.createServer(function (req, rep) {
    

    let pathname = url.parse(req.url).pathname;

    let date = new Date();
    
    date.setMinutes(date.getMinutes()+1);

    rep.writeHead(200, {
     'Expires' : date.toUTCString() });
    
    let data = fs.readFileSync(path.normalize(__dirname + pathname,'utf-8'));

    rep.end(data);
})

Here we set up 1 Minute strong cache , In a minute , There is no need to request the server .

Insert picture description here
Refresh index.html View console , You can find that the corresponding head appears Expires Field .

Insert picture description here

At this time, data is obtained from the cache .

but Expires There are shortcomings , The time it compares is related to the local system time , If the system time is adjusted , Cache invalidation may occur . High requirements for system and server time . To solve this problem , have access to Cache-Control Relative time cache solve .

2.2：Cache-Control

Cache-Control Although it can be set Strong cache , But by setting Cache-Control : no-cache have access to Negotiate the cache .

2.2.1：max-age

Set the maximum relative expiration time , Unit is second .

http.createServer(function (req, rep) {
    

    let pathname = url.parse(req.url).pathname;

    rep.writeHead(200, {
     'Cache-Control' : 'max-age=30' });
    
    let data = fs.readFileSync(path.normalize(__dirname + pathname,'utf-8'));

    rep.end(data);
})

Set up 30 Seconds after expired .

Refresh index.html ：

Insert picture description here

2.2.2：s-maxage

Its usage and max-age identical , But it's setting proxy server The cache time of .

2.2.3：public

public usage ：Cache-Control : 'public,max-age=3600'

Its function is Proxy server can cache .

2.2.4：private

private usage ：Cache-Control : 'private,max-age=3600'

Its function is Individuals can cache , Proxy server cannot cache .

The default is private

2.2.5：no-cache

private usage ：Cache-Control : 'no-cache'

Set up no-cache after , Before publishing cached copies , Forcing the cache to submit the request to the original server for validation ( Negotiate cache validation ).

2.2.6：no-store

Its function is Disable caching .

3： Negotiate the cache

Negotiate the cache Every time I'm going to Server side Send a request , from Server side To tell client Whether to use cache .

If you use caching Server side Need to return 304 State .

3.1：Last-Modified/If-Modified-Since

Server response ：Last-Modified

The client sends ：If-Modified-Since

Server side Received If-Modified-Since , from Server side Compare whether the two times are the same , If different, return data , If the same, return 304 tell client Use the cache .

http.createServer(function (req, rep) {
    

    let pathname = url.parse(req.url).pathname;

    let time = fs.statSync(path.normalize(__dirname + pathname)).mtime.toUTCString()
    let ifMdifiedSince = req.headers['if-modified-since'];

    if(ifMdifiedSince===time){
    
        rep.statusCode = 304
        rep.end()
        return
    }

    rep.setHeader("Cache-Control",'no-cache');
    rep.setHeader('Last-Modified' ,time);
    let data = fs.readFileSync(path.normalize(__dirname + pathname,'utf-8'));
    rep.end(data);
})
.listen(9090);

Insert picture description here

It can be found that only 113B Memory .

3.1.1： Why does cache still occupy broadband ？

Negotiation caching is not about not sending requests , But after sending the request , from Server side Determine whether to use cache for this result , But the request still arrived at our server . If the cache is confirmed , be Server side Need to set up 304 State , Otherwise, do not set .

3.1.2： Test whether it is cached

Insert picture description here

Clear cache first ：

Refresh the view ：

Insert picture description here
Original image size 73.8kb , But after caching, we only use 113B .

Be careful ：Last-Modified The minimum unit is seconds , If the difference time is less than 1 second , Then the function fails .

3.2：Etag

Etag It is judged according to the unique fingerprint of the document , Every time you modify a file Fingerprints of documents Will change .

More relevant knowledge ：javascript get files sha-256,sha-384,sha-512 Abstract , Verify that the file has not been tampered with , Verify file consistency , Document security management , Calculate the MD5 value

Server return Etag Response head .

The client automatically sends If-None-Match head .

The server determines whether to cache , If caching , The server needs to return 304 State .

let http = require('http');
let fs = require('fs');
let url = require('url');
let path = require('path');
var crypto = require('crypto');

http.createServer(function (req, rep) {
    

    let pathname = url.parse(req.url).pathname;
    let data = fs.readFileSync(path.normalize(__dirname + pathname, 'utf-8'));
    const hash = crypto.createHash('md5');
    hash.update(data, 'utf8');
    const md5 = hash.digest('hex');

    let ifNoneMatch = req.headers['if-none-match'];

    if (ifNoneMatch === md5) {
    
        rep.statusCode = 304
        rep.end()
        return
    }

    rep.setHeader("Cache-Control", 'no-cache');
    rep.setHeader('Etag', md5);
    rep.end(data);
})
.listen(9090);

Insert picture description here
Our content has been cached , No picture is requested from server .

Be careful ： although Etag It's solved Last-Modified Smallest unit second The problem of , But calculating file fingerprint information consumes memory , therefore Etag It's not a complete replacement for Last-Modified. So which one to use , We need to consider comprehensively according to the use scenario .

4： How to take into account the advantages of strong cache and negotiation cache at the same time

Now we know that Negotiate the cache You need to send a request , But you can know the time of file change more accurately , Update our cache faster .

Strong cache Although there is no need to send a request , However, it is impossible to know the changes of the document as soon as possible , Users may not get the latest content for a long time .

Is there a way , At the same time to realize There is no need to send a request to the server But you can Get the latest content as soon as possible Well ？

Want to achieve this demand , We need to set strong cache first .

let http = require('http');
let fs = require('fs');
let url = require('url');
let path = require('path');

http.createServer(function (req, rep) {
    

    let pathname = url.parse(req.url).pathname;
    let data = fs.readFileSync(path.normalize(__dirname + pathname, 'utf-8'));
   
    rep.writeHead(200,{
    'Cache-Control':'max-age=3600'});
    rep.end(data);
})
.listen(9090);

When we update the file , We can add a file suffix .

such as ： The document we requested is http://localhost:9090/test1.jpg

We can add a suffix , Change to http://localhost:9090/test1.jpg?t=123456

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="http://localhost:9090/test1.jpg?t=123456" alt="">
</body>
</html>

This not only makes the cache strong , And when the file is updated , You can also send a request to get the latest files .

原网站

版权声明
本文为[Nineteen (drag on and on)]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211316114751.html

边栏推荐

猜你喜欢

随机推荐