집 > 기사 > 웹 프론트엔드 > 노드를 사용하여 http 캐시의 내용을 해석합니다.

노드를 사용하여 http 캐시의 내용을 해석합니다.

不言앞으로: 2018-10-29 14:48:251661검색

이 기사의 내용은 http 캐시의 내용을 해석하기 위해 노드를 사용하는 것에 관한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

노드를 사용하여 웹 서비스를 제공하는 것과 톰캣이나 아파치를 직접 서버로 사용하는 것은 다릅니다. 많은 작업을 직접 수행해야 합니다. 또한 자신만의 캐싱 전략을 선택해야 합니다. 정적 리소스를 관리하는 데 사용할 수 있는 koa-static 및 express.static과 같은 것들이 있지만 개발이나 구성을 보다 편안하게 하려면 http 캐싱을 이해하는 것이 필요합니다. 또한 프런트엔드 최적화의 핵심인 http 캐싱에 대해서도 이해해야 합니다.

http 캐시란 무엇입니까

RFC 7234(https://tools.ietf.org/pdf/rfc7234.pdf)에서는 HTTP 캐시가 응답 메시지의 로컬 저장소이며 저장, 검색 및 삭제 하위 시스템의 메시지를 제어합니다.

일반인의 관점에서 보면 http 프로토콜은 몇 가지 지침을 규정합니다. http 프로토콜을 구현하는 서버와 브라우저는 이러한 지침에 따라 후속 사용을 위해 응답을 저장할지 여부와 방법을 결정합니다.

#🎜🎜 #http 캐시의 의미

응답 속도 향상

대역폭 사용량 감소 및 트래픽 절약

서버 부담 감소

캐시 관련 지침을 지정하지 마세요

이 경우 브라우저는 캐시하지 않고 매번 서버를 요청합니다. 그런데 이상한 점은 nginx 구현에서 이 경우입니다. still Used 프록시 서버는 캐싱을 수행합니다. 즉, 동일한 리소스가 여러 번 요청되면 프록시 서버는 리소스의 만료 시간 또는 유효 시간 max-age를 고려하여 원본 서버에 한 번만 요청해야 합니다.

리소스를 강력하게 캐시하는 방법

1 .expires

이 필드는 리소스의 만료 시간을 정의합니다. 실제 예를 살펴보겠습니다.

#🎜🎜 #

이 만료는 GMT 시간. 첫 번째 요청이 이루어지면 서버가 응답에 expires를 추가하여 브라우저가 캐시하는 만료 시간을 식별합니다. 이 리소스를 다시 요청할 때 브라우저는 이 리소스에 대한 마지막 요청의 만료 시간을 자체 시스템 시간과 비교합니다. 시스템 시간이 만료 시간보다 짧으면 리소스가 만료되지 않았음을 증명합니다. 요청 없이 마지막으로 캐시된 리소스, 그렇지 않으면 다시 요청하면 서버는 응답에 새로운 만료 시간을 제공합니다.

const d  = new Date(Date.now() + 5000);
res.writeHead(200, {
    'Content-Type': 'image/png',
    'expires': d.toGMTString()
});
res.end(img);

2.Cache-Control: [public | private,] max- age=${ n}, s-maxage=${m} 노드를 사용하여 http 캐시의 내용을 해석합니다.

만료 문제는 클라이언트의 시스템 시간에 따라 달라지므로 클라이언트의 시스템 시간 오류로 인해 판단 오류가 발생할 수 있습니다. HTTP1.1은 이 문제를 해결하기 위해 Cache-Control을 추가했습니다. 이 명령 값은 비교적 풍부하며 일반적인 값은 다음과 같습니다.

public/private: 로고 리소스를 프록시 서버에서 캐시할 수 있는지 여부, 공개 로고 리소스는 프록시 서버와 브라우저 모두에서 캐시할 수 있음, 비공개 ID 리소스는 프록시 서버가 아닌 브라우저에서만 캐시할 수 있습니다. expires是个GMT时间, 它的工作机制是, 首次请求时, 服务器在响应中加上expires标识资源的到期时间, 浏览器缓存这个资源, 再次请求时, 浏览器将上一次请求到这个资源的过期时间与自己的系统时间对比, 若系统时间小于过期时间, 则证明资源没有过期, 直接用上次缓存的资源, 不必请求; 否则重新请求, 服务器在响应中给出新的过期时间.

const http = require('http');
const fs = require('fs');
let etag = 0;
let tpl = fs.readFileSync('./index.html');
let img = fs.readFileSync('./test.png');
http.createServer((req, res) => {
    etag++; // 我是个假的eTag
    console.log('--->', req.url);
    switch (req.url) {
        // 模板
        case '/index':
            res.writeHead(200, {
                'Content-Type': 'text/html',
                'Cache-Control': 'no-store'
            });
            res.end(tpl);
            break;
        // 1. 不给任何与缓存相关的头, 任何情况下, 既不会被浏览器缓存, 也不会被代理服务缓存
        case '/img/nothing_1':
            res.writeHead(200, {
                'Content-Type': 'image/png'
            });
            res.end(img);
            break;
            
        // 2. 设置了no-cache表明每次要使用缓存资源前需要向服务器确认
        case '/img/cache-control=no-cache_2':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'no-cache'
            });
            res.end(img);
            break;

        // 3. 设置max-age表示在浏览器最多缓存的时间
        case '/img/cache-control=max-age_3':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'max-age=10'
            });
            res.end(img);
            break;

        // 4. 设置了max-age s-maxage public: public 是说这个资源可以被服务器缓存, 也可以被浏览器缓存, 
        // max-age意思是浏览器的最长缓存时间为n秒, s-maxage表明代理服务器的最长缓存时间为那么多秒
        case '/img/cache-control=max-age_s-maxage_public_4':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'public, max-age=10, s-maxage=40'
            });
            res.end(img);
            break;

        // 设置了max-age s-maxage private: private 是说这个资源只能被浏览器缓存, 不能被代理服务器缓存
        // max-age说明了在浏览器最长缓存时间, 这里的s-maxage实际是无效的, 因为不能被代理服务缓存
        case '/img/cache-control=max-age_s-maxage_private_5':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'private, max-age=10, s-maxage=40'
            });
            res.end(img);
            break;
        
        // 7. 可以被代理服务器缓存, 确不能被浏览器缓存
        case '/img/cache-control=private_max-age_7':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'public, s-maxage=40'
            });
            res.end(img);
            break;
        // 8. 协商缓存
        case '/img/talk_8':
            let stats = fs.statSync('./test.png');
            let mtimeMs = stats.mtimeMs;
            let If_Modified_Since = req.headers['if-modified-since'];
            let oldTime = 0;
            if(If_Modified_Since) {
                const If_Modified_Since_Date = new Date(If_Modified_Since);
                oldTime = If_Modified_Since_Date.getTime();
            }
            
            mtimeMs = Math.floor(mtimeMs / 1000) * 1000;    // 这种方式的精度是秒, 所以毫秒的部分忽略掉
            console.log('mtimeMs', mtimeMs);
            console.log('oldTime', oldTime);
            if(oldTime <p>2.Cache-Control:[public | private,] max-age=${n}, s-maxage=${m}</p><p><code>expires</code> 存在的问题是他依赖于客户端的系统时间, 客户端系统时间错误可能会引起判断错误. HTTP1.1增加了<code>Cache-Control</code>解决此问题, 这个指令值比较丰富, 常见的如下:</p>

public/private: 标识资源能不能被代理服务器缓存, public 标识资源既能被代理服务器缓存也能被浏览器缓存, private标识资源只能被浏览器缓存, 不能被代理服务器缓存.
max-age: 用于指定在客户端缓存的有效时间, 单位s, 超过n秒需要重新请求, 不超过则可以使用缓存
s-maxage: 这个是针对代理服务器的, 表示资源在代理服务器缓存时间没有超过这个时间不必向源服务器请求, 否则需要.
no-cache: 有这个指令表示不走浏览器缓存了, 协商缓存还可以走
no-store: 强制无缓存, 协商缓存也不走了, 测试发下即使响应中有Last-Modified, 浏览器请求时页不会带If-Modified-Since

一个实例

노드를 사용하여 http 캐시의 내용을 해석합니다.

协商缓存

所谓协商缓存就是客户端想用缓存资源时先向服务器询问, 如果服务器如果认为这个资源没有过期, 可以继续用则给出304响应, 客户端继续使用原来的资源; 否则给出200, 并在响应body加上资源, 客户端使新的资源.

1.Last-Modified与If-Modified-Since

这个机制是, 服务器在响应头中加上Last-Modified, 一般是一个资源的最后修改时间, 浏览器首次请求时获得这个时间, 下一次请求时将这个时间放在请求头的If-Modified-Since, 服务器收到这个If-Modified-Since时间n后查询资源的最后修改时间m与之对比, 若m>n, 给出200响应, 更新Last-Modified

max-age: 클라이언트에서 캐싱의 유효 시간을 지정하는 데 사용됩니다. , n 초를 초과하면 다시 요청해야 합니다. 이 시간을 초과하지 않으면 원본 서버 요청을 사용할 수 있습니다.

no -cache: 이 명령은 브라우저 캐시를 사용하지 않으며 협상된 캐시도 사용할 수 있음을 의미합니다. #🎜🎜#

#🎜🎜#no-store: 캐싱을 강제하지 않으며 협상된 캐시를 사용합니다. 테스트 중에 응답에 Last-Modified가 포함되어 있어도 페이지에는 브라우저가 요청할 때 If-Modified-Since#🎜🎜가 포함되지 않습니다. #

#🎜🎜#인스턴스#🎜🎜##🎜🎜##🎜🎜# 노드를 사용하여 http 캐시의 내용을 해석합니다.

#🎜🎜## 🎜🎜#

협상 캐시

# 🎜🎜#협상 캐시란 클라이언트가 캐시된 리소스를 사용하려고 할 때 먼저 서버에 요청하여 리소스가 만료되지 않았고 계속 사용할 수 있다고 판단하면 304 응답을 제공한다는 의미입니다. 클라이언트는 원래 리소스를 계속 사용합니다. 그렇지 않으면 200이 제공되고 리소스가 응답 본문에 추가되며 클라이언트는 #🎜🎜##🎜🎜#1.Last-Modified 및 If-Modified를 사용합니다. -Since#🎜🎜 ##🎜🎜#이 메커니즘은 서버가 응답 헤더에 Last-Modified를 추가하는 것입니다. 이는 일반적으로 브라우저가 리소스를 마지막으로 수정한 시간입니다. 먼저 요청하고 다음 요청에 사용됩니다. 이 시간은 요청 헤더의 If-Modified-Since에 배치됩니다. code>If-Modified-Since 시간 n 수정 시간 m과 비교하여 m>n인 경우 200 응답은 다음과 같습니다. Last-Modified가 새 값으로 업데이트되고 본문은 이 리소스를 받은 후 새 리소스를 사용합니다. 그렇지 않으면 304 응답이 제공되고 본문에 데이터가 없습니다. 브라우저는 마지막으로 캐시된 리소스 #🎜🎜##🎜🎜#2.Etag 및 If-None-Match# 🎜🎜#을 사용합니다.

Last-Modified模式存两个问题, 一是它是秒级别的比对, 所以当资源的变化小于一秒时浏览器可能使用错误的资源; 二是资源的最新修改时间变了可能内容并没有变, 但是还是会给出完整响应, 造成浪费. 基于此在HTTP1.1引入了Etag模式.

这个与上面的Last-Modified机制基本相同, 不过不再是比对最后修改时间而是比对资源的标识, 这个Etag一般是基于资源内容生成的标识. 由于Etag是基于内容生成的, 所以当且仅当内容变化才会给出完整响应, 无浪费和错误的问题.

演示第8, 10

如何选择缓存策略

https://tools.ietf.org/pdf/rfc7234.pdf

附录

1.演示代码

const http = require('http');
const fs = require('fs');
let etag = 0;
let tpl = fs.readFileSync('./index.html');
let img = fs.readFileSync('./test.png');
http.createServer((req, res) => {
    etag++; // 我是个假的eTag
    console.log('--->', req.url);
    switch (req.url) {
        // 模板
        case '/index':
            res.writeHead(200, {
                'Content-Type': 'text/html',
                'Cache-Control': 'no-store'
            });
            res.end(tpl);
            break;
        // 1. 不给任何与缓存相关的头, 任何情况下, 既不会被浏览器缓存, 也不会被代理服务缓存
        case '/img/nothing_1':
            res.writeHead(200, {
                'Content-Type': 'image/png'
            });
            res.end(img);
            break;
            
        // 2. 设置了no-cache表明每次要使用缓存资源前需要向服务器确认
        case '/img/cache-control=no-cache_2':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'no-cache'
            });
            res.end(img);
            break;

        // 3. 设置max-age表示在浏览器最多缓存的时间
        case '/img/cache-control=max-age_3':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'max-age=10'
            });
            res.end(img);
            break;

        // 4. 设置了max-age s-maxage public: public 是说这个资源可以被服务器缓存, 也可以被浏览器缓存, 
        // max-age意思是浏览器的最长缓存时间为n秒, s-maxage表明代理服务器的最长缓存时间为那么多秒
        case '/img/cache-control=max-age_s-maxage_public_4':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'public, max-age=10, s-maxage=40'
            });
            res.end(img);
            break;

        // 设置了max-age s-maxage private: private 是说这个资源只能被浏览器缓存, 不能被代理服务器缓存
        // max-age说明了在浏览器最长缓存时间, 这里的s-maxage实际是无效的, 因为不能被代理服务缓存
        case '/img/cache-control=max-age_s-maxage_private_5':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'private, max-age=10, s-maxage=40'
            });
            res.end(img);
            break;
        
        // 7. 可以被代理服务器缓存, 确不能被浏览器缓存
        case '/img/cache-control=private_max-age_7':
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'cache-control': 'public, s-maxage=40'
            });
            res.end(img);
            break;
        // 8. 协商缓存
        case '/img/talk_8':
            let stats = fs.statSync('./test.png');
            let mtimeMs = stats.mtimeMs;
            let If_Modified_Since = req.headers['if-modified-since'];
            let oldTime = 0;
            if(If_Modified_Since) {
                const If_Modified_Since_Date = new Date(If_Modified_Since);
                oldTime = If_Modified_Since_Date.getTime();
            }
            
            mtimeMs = Math.floor(mtimeMs / 1000) * 1000;    // 这种方式的精度是秒, 所以毫秒的部分忽略掉
            console.log('mtimeMs', mtimeMs);
            console.log('oldTime', oldTime);
            if(oldTime <p>2.测试用代理服务器nginx配置</p><p>不要问我这是个啥, 我是copy的</p><pre class="brush:php;toolbar:false">worker_processes  8;
  
events {
    worker_connections  65535;
}
  
http {
    include       mime.types;
    default_type  application/octet-stream;
    charset utf-8;
 
    log_format  main  '$http_x_forwarded_for $remote_addr $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_cookie" $host $request_time';
    sendfile       on;
    tcp_nopush     on;
    tcp_nodelay    on;
    keepalive_timeout  65;
    proxy_connect_timeout 500;
    #跟后端服务器连接的超时时间_发起握手等候响应超时时间
    proxy_read_timeout 600;
    #连接成功后_等候后端服务器响应的时间_其实已经进入后端的排队之中等候处理
    proxy_send_timeout 500;
    #后端服务器数据回传时间_就是在规定时间内后端服务器必须传完所有数据
    proxy_buffer_size 128k;
    #代理请求缓存区_这个缓存区间会保存用户的头信息以供Nginx进行规则处理_一般只要能保存下头信息即可  
    proxy_buffers 4 128k;
    #同上 告诉Nginx保存单个用的几个Buffer最大用多大空间
    proxy_busy_buffers_size 256k;
    #如果系统很忙的时候可以申请更大的proxy_buffers 官方推荐*2
    proxy_temp_file_write_size 128k;
    #设置web缓存区名为cache_one,内存缓存空间大小为12000M，自动清除超过15天没有被访问过的缓存数据，硬盘缓存空间大小200g
    #要想开启nginx的缓存功能，需要添加此处的两行内容！
    #设置Web缓存区名称为cache_one,内存缓存空间大小为500M,缓存的数据超过1天没有被访问就自动清除;访问的缓存数据,硬盘缓存空间大小为30G
    proxy_cache_path /usr/local/nginx/proxy_cache_path levels=1:2 keys_zone=cache_one:500m inactive=1d max_size=30g;
 
    #创建缓存的时候可能生成一些临时文件存放的位置
    proxy_temp_path /usr/local/nginx/proxy_temp_path;
 
    fastcgi_connect_timeout 3000;
    fastcgi_send_timeout 3000;
    fastcgi_read_timeout 3000;
    fastcgi_buffer_size 256k;
    fastcgi_buffers 8 256k;
    fastcgi_busy_buffers_size 256k;
    fastcgi_temp_file_write_size 256k;
    fastcgi_intercept_errors on;
  
     
    client_header_timeout 600s;
    client_body_timeout 600s;
  
    client_max_body_size 100m;             
    client_body_buffer_size 256k;           
  
    gzip  off;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript;
    gzip_vary on;
  
 
    include vhosts/*.conf;
    server {
        listen       80;
        server_name  localhost;
        location / {
            proxy_pass  http://127.0.0.1:1234;
            proxy_set_header   Host             $http_host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_redirect off;
            proxy_cache cache_one;
            #此处的cache_one必须于上一步配置的缓存区域名称相同
            proxy_cache_valid 200 304 12h;
            proxy_cache_valid 301 302 1d;
            proxy_cache_valid any 1h;
            #不同的请求设置不同的缓存时效
            proxy_cache_key $uri$is_args$args;
            #生产缓存文件的key，通过4个string变量结合生成
            expires off;
            #加了这个的话会自己修改cache-control, 写成off则不会
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

위 내용은 노드를 사용하여 http 캐시의 내용을 해석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：HTTP 캐싱에 대한 자세한 소개다음 기사：HTTP 캐싱에 대한 자세한 소개