用node探究http缓存

时间: 2018-10-29阅读: 1216标签: node

用node搞web服务和直接用tomcat、Apache做服务器不太一样, 很多工作都需要自己做。缓存策略也要自己选择,虽然有像koa-static,express.static这些东西可以用来管理静态资源,但是为了开发或配置时更加得心应手,知其所以然,有了解http缓存的必要。另外,http缓存作为一个前端优化的一个要点,也应该有所了解。  


什么是http缓存

  • RFC 7234 (https://tools.ietf.org/pdf/rfc7234.pdf)指出HTTP缓存是响应消息的本地存储,并且是控制其中消息的存储、检索和删除的子系统。

  • 通俗讲: http协议规定了一些指令, 实现http协议的服务器和浏览器根据这些指令决定要不要以及如何把响应存储起来以备后续使用.


http缓存的意义

  1. 提高响应速度
  2. 减少带宽占用, 省流量
  3. 减小服务器压力

不指定任何与缓存有关的指令

这种情况下浏览器不做缓存, 每次都会想服务器请求. 但是比较奇怪的是在nginx的实现中, 这种情况下还是被代理服务器做了缓存.也就是说, 当多次请求同一个资源时, 代理服务器只向源服务器请求一次.


强制缓存

  • 所谓强制缓存就是给出资源的到期时间expires或者有效时间max-age, 在这个时间之内该资源应该被缓存.

  • 如何让一个资源被强缓存

1.expires

这个字段定义了一个资源到期的时间. 看一个实际的例子:


可以看到这个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,smaxage={m}

expires 存在的问题是他依赖于客户端的系统时间, 客户端系统时间错误可能会引起判断错误. HTTP1.1增加了Cache-Control解决此问题, 这个指令值比较丰富, 常见的如下:

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

一个实例



协商缓存

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

1.Last-Modified与If-Modified-Since

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

2.Etag与If-None-Match

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

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


如何选择缓存策略

https://developers.google.cn/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn


附录

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 < mtimeMs) {
                res.writeHead(200, {
                    'Cache-Control': 'no-cache',   
                    // 测试发现, 必须要有max-age=0 或者no-cache,或者expires为当前, 才会协商, 否则没有协商的过程 
                    'Last-Modified': new Date(mtimeMs).toGMTString()
                });
                res.end(fs.readFileSync('./test.png'));
            }else {
                res.writeHead(304);
                res.end();
            }
           
        // 9. 设置了expires, 表示资源到期时间
        case '/img/expires_9':
            const d  = new Date(Date.now() + 5000);
            res.writeHead(200, {
                'Content-Type': 'image/png',
                'expires': d.toGMTString()
            });
            res.end(img);
            break;
        
        // 10. 设置了expires, 表示资源到期时间
        case '/img/etag_10':
            const If_None_Match = req.headers['if-none-match'];
            console.log('If_None_Match,',If_None_Match);
            if(If_None_Match != etag) {
                res.writeHead(200, {
                    'Content-Type': 'image/png',
                    'Etag': String(etag)
                });
                res.end(img);
            }else {
                res.statusCode = 304;
                res.end();
            }
            
            break;

        // 11. no-store 能协商缓存吗? 不能, 请求不会带if-modified-since
        case '/img/no-store_11':
            const stats2 = fs.statSync('./test.png');
            let mtimeMs2 = stats2.mtimeMs;
            let If_Modified_Since2 = req.headers['if-modified-since'];
            let oldTime2 = 0;
            if(If_Modified_Since2) {
                const If_Modified_Since_Date = new Date(If_Modified_Since2);
                oldTime2 = If_Modified_Since_Date.getTime();
            }
            
            mtimeMs2 = Math.floor(mtimeMs2 / 1000) * 1000;    // 这种方式的精度是秒, 所以毫秒的部分忽略掉
            console.log('mtimeMs', mtimeMs2);
            console.log('oldTime', oldTime2);
            if(oldTime2 < mtimeMs2) {
                res.writeHead(200, {
                    'Cache-Control': 'no-store',   
                    // 测试发现, 必须要有max-age=0 或者no-cache,或者expires为当前, 才会协商, 否则没有协商的过程 
                    'Last-Modified': new Date(mtimeMs2).toGMTString()
                });
                res.end(fs.readFileSync('./test.png'));
            }else {
                res.writeHead(304);
                res.end();
            }
        default:
            res.statusCode = 404;
            res.statusMessage = 'Not found',
            res.end();
    }

}).listen(1234);

2.测试用代理服务器nginx配置

不要问我这是个啥, 我是copy的

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;
        }
    }
}

参考文献

https://juejin.im/book/5b936540f265da0a9624b04b/section/5b9ba651f265da0ac726e5de

这是一个付费的册子,可能没法访问

文章来源: http://www.cnblogs.com/floor/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1200

Node.js 中的依赖注入

依赖注入是一种软件设计模式,其中一个或多个依赖项(或服务)被注入或通过引用传递到依赖对象中。

Node.js v13.2.0 开始支持ES modules了

Node.js 前不久发布了v13.2.0,宣布开始支持ES modules。在此之前,想要在node中使用ES modules,需要添加--experimental-module。v13.2.0版本后,可以直接使用ES modules了。

node初步学习

Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。Node.js 几乎每一个 API 都是支持回调函数的

Nodejs ORM框架Sequelize快速入门

什么是ORM?简单的讲就是对SQL查询语句的封装,让我们可以用OOP的方式操作数据库,优雅的生成安全、可维护的SQL代码。什么是Sequelize?Sequelize是一款基于Nodejs功能强大的异步ORM框架。

Node.js是什么?

如果你有一定的前端基础,比如 HTML、CSS、JavaScript、jQuery;那么,Node.js 能让你以最低的成本快速过渡成为一个全栈工程师(我称这个全栈为伪全栈,我认为的全栈也要精通数据库,不喜勿喷),从而触及后端和移动端的开发。

node里path是干什么的?

Node.js path模块提供了一些用于处理文件路径的小工具,我们可以通过以下方式引入该模块:path.posix提供上述 path 的方法,不过总是以 posix 兼容的方式交互。

node怎么更新升级?

如果你的node安装的比较早,现在最新的版本比自己安装的高,则可以通过升级的方式更新到指定的版本和最新的版本。下面本篇文章就来给大家介绍windows下和linux更新升级node版本的方法。

路径 alias 在 Node 中的最佳姿势

根据当前自己已有的知识体系,先想想有哪几种解决方案,然后再去查找业界的解决方案,这样,我们才能不断完善自己的知识体系,培养足够的思维能力。

在 Node.js 中看 JavaScript 的引用

早期学习 Node.js 的时候 (2011-2012),有挺多是从 PHP 转过来的,当时有部分人对于 Node.js 编辑完代码需要重启一下表示麻烦(PHP不需要这个过程),于是社区里的朋友就开始提倡使用 node-supervisor 这个模块来启动项目

Node.js FS模块方法速查

所有文件操作提供同步和异步的两种方式,本笔记只记录异步的API,异步方式其最后一个参数是回调函数。回调函数的第一个参数往往是错误对象,如果没有发生参数,那么第一个参数可能是null或者undefinded。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!