关于前端:http-缓存简介

1.缓存的作用

• 缩小网络流量传输，减少页面渲染速度
• 缩小服务器累赘，进步网站性能能
• 减少网站加载速度，进步网站性能

2. 缓存的分类

比照缓存

浏览器第一次申请，服务器会把资源内容和缓存标识一块返回客户端，客户端将二者备份至缓存数据库中。

当前每次应用资源，都须要带着缓存标识申请服务器。服务器依据申请携带的缓存标识，判断资源是否过期，如果过期间接返回资源内容和新的缓存标识，如果不过期，返回状态码304，告诉客户端没有生效能够应用缓存数据库外面的数据。

• 比照缓存，缓存未生效

• 比照缓存 缓存生效

缓存标识

最初批改工夫

1. 服务端响应的时候,在响应头中减少 Last-Modified，通知客户端此资源的最初批改工夫
2. If-Modified-Since ：在浏览器再次发动申请是，发现资源有 Last-Modified 属性，会主动在申请头中减少 If-Modified-Since 。值为 Last-Modified 的值
3. 服务器收到申请后发现有头If-Modified-Since则与被申请资源的最初批改工夫进行比对。若最初批改工夫较新，阐明资源又被改变过，则响应最新的资源内容并返回200状态码；
4. 若最初批改工夫和If-Modified-Since一样，阐明资源没有批改，则响应304示意未更新，告知浏览器持续应用所保留的缓存文件。

• Last-Modified 存在的问题
• 某些服务器不能准确的失去资源的最初批改工夫，这样就无奈通过最初批改工夫更新
• 对于常常批改的资源，在秒级以下的工夫更新， Last-Modified 的更新工夫只能准确到秒
• 一些文件的最初批改工夫扭转了，然而内容并未扭转。 咱们不心愿客户端认为这个文件批改了。
• 如果同样的一个文件位于多个CDN服务器上的时候内容尽管一样，批改工夫不一样。
• 代码实现

let http = require('http');let fs = require('fs');let path = require('path');let mime = require('mime');http.createServer(function (req, res) {    let file = path.join(__dirname, req.url);    fs.stat(file, (err, stat) => {        if (err) {            sendError(err, req, res, file, stat);        } else {            let ifModifiedSince = req.headers['if-modified-since'];            if (ifModifiedSince) {                if (ifModifiedSince == stat.ctime.toGMTString()) {                    res.writeHead(304);                    res.end();                } else {                    send(req, res, file, stat);                }            } else {                send(req, res, file, stat);            }        }    });}).listen(8080);function send(req, res, file, stat) {    res.setHeader('Last-Modified', stat.ctime.toGMTString());    res.writeHead(200, { 'Content-Type': mime.getType(file) });    fs.createReadStream(file).pipe(res);}function sendError(err, req, res, file, stat) {    res.writeHead(400, { "Content-Type": 'text/html' });    res.end(err ? err.toString() : "Not Found");}

2. ETag

ETag是依据实体内容生成的一段hash字符串,能够作为资源的内容的惟一示意。当资源产生扭转时，ETag也随之发生变化。 ETag是Web服务端产生的，而后发给浏览器客户端。

1. 客户端想判断缓存是否可用能够先获取缓存中文档的ETag，而后通过 If-None-Match发送申请给Web服务器询问此缓存是否可用。
2. 服务器收到申请，将服务器的中此文件的 ETag,跟申请头中的 If-None-Match相比拟,如果值是一样的,阐明缓存还是最新的,Web服务器将发送304 Not Modified响应码给客户端示意缓存未修改过，能够应用。
3. 如果不一样则Web服务器将发送该文档的最新版本给浏览器客户端

• Etag 的毛病
• 服务器每次都要计算资源的hash 值， 耗费服务器资源
• 代码实现

let http = require('http');let fs = require('fs');let path = require('path');let mime = require('mime');let crypto = require('crypto');http.createServer(function (req, res) {    let file = path.join(__dirname, req.url);    fs.stat(file, (err, stat) => {        if (err) {            sendError(err, req, res, file, stat);        } else {            let ifNoneMatch = req.headers['if-none-match'];            let etag = crypto.createHash('sha1').update(stat.ctime.toGMTString() + stat.size).digest('hex');            if (ifNoneMatch) {                if (ifNoneMatch == etag) {                    res.writeHead(304);                    res.end();                } else {                    send(req, res, file, etag);                }            } else {                send(req, res, file, etag);            }        }    });}).listen(8080);function send(req, res, file, etag) {    res.setHeader('ETag', etag);    res.writeHead(200, { 'Content-Type': mime.lookup(file) });    fs.createReadStream(file).pipe(res);}function sendError(err, req, res, file, etag) {    res.writeHead(400, { "Content-Type": 'text/html' });    res.end(err ? err.toString() : "Not Found");}

强制缓存

强制缓存，在本地缓存未生效状况下，间接应用本地缓存，不进行与服务端交互。

• 缓存未生效

• 缓存生效

缓存标识

浏览器会将文件缓存到Cache目录，第二次申请时浏览器会先查看Cache目录下是否含有该文件，如果有，并且还没到Expires设置的工夫，即文件还没有过期，那么此时浏览器将间接从Cache目录中读取文件，而不再发送申请

• Expires是服务器响应音讯头字段，在响应http申请时通知浏览器在过期工夫前浏览器能够间接从浏览器缓存取数据，而无需再次申请,这是HTTP1.0的内容，当初浏览器均默认应用HTTP1.1,所以根本能够疏忽

• Cache-Control与Expires的作用统一，都是指明以后资源的有效期，管制浏览器是否间接从浏览器缓存取数据还是从新发申请到服务器取数据,如果同时设置的话，其优先级高于Expires

• private 客户端能够缓存
• public 客户端和代理服务器都能够缓存
• max-age=60 缓存内容将在60秒后生效
• no-cache 须要应用比照缓存验证数据,强制向源服务器再次验证
• no-store 所有内容都不会缓存，强制缓存和比照缓存都不会触发

Cache-Control:private, max-age=60, no-cache

代码实现

let http = require('http');let fs = require('fs');let path = require('path');let mime = require('mime');let crypto = require('crypto');http.createServer(function (req, res) {    let file = path.join(__dirname, req.url);    console.log(file);    fs.stat(file, (err, stat) => {        if (err) {            sendError(err, req, res, file, stat);        } else {            send(req, res, file);        }    });}).listen(8080);function send(req, res, file) {    let expires = new Date(Date.now() + 60 * 1000);    res.setHeader('Expires', expires.toUTCString());    res.setHeader('Cache-Control', 'max-age=60');    res.writeHead(200, { 'Content-Type': mime.lookup(file) });    fs.createReadStream(file).pipe(res);}function sendError(err, req, res, file, etag) {    res.writeHead(400, { "Content-Type": 'text/html' });    res.end(err ? err.toString() : "Not Found");}