溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

node.js實(shí)現(xiàn)http服務(wù)器與瀏覽器之間的內(nèi)容緩存操作示例

發(fā)布時(shí)間：2020-08-24 11:25:38 來源：腳本之家 閱讀：168 作者：懷素真 欄目：web開發(fā)

本文實(shí)例講述了node.js實(shí)現(xiàn)http服務(wù)器與瀏覽器之間的內(nèi)容緩存操作。分享給大家供大家參考，具體如下：

一、緩存的作用

1、減少了數(shù)據(jù)傳輸，節(jié)約流量。

2、減少服務(wù)器壓力，提高服務(wù)器性能。

3、加快客戶端加載頁面的速度。

二、緩存的分類

1、強(qiáng)制緩存，如果緩存有效，則不需要與服務(wù)器發(fā)生交互，直接使用緩存。

2、對比緩存，每次都需要與服務(wù)器發(fā)生交互，對緩存進(jìn)行比較判斷是否可以使用緩存。

三、通過使用 Last-Modified / If-Modified-Since 來進(jìn)行緩存判斷

1、Last-Modified 是服務(wù)器向客戶端發(fā)送的頭信息，用于告訴客戶端資源的 最后修改時(shí)間，該信息瀏覽器會(huì)保存起來。

2、If-Modified-Since 是客戶端向服務(wù)器發(fā)送的頭信息，當(dāng)客戶端再次請求資源時(shí)，瀏覽器會(huì)帶上該信息發(fā)送給服務(wù)器，服務(wù)器通過該信息來判斷資源是否過期。

3、如果沒有過期，則響應(yīng) 304 表示 未更新，告訴瀏覽器使用保存的緩存。

4、如果過期了，則響應(yīng) 200，返回最新的資源。

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const util = require('util');
const mime = require('mime');
//創(chuàng)建http服務(wù)器并監(jiān)聽端口
let server = http.createServer();
server.listen(1234, '0.0.0.0', function () {
  console.log('開始監(jiān)聽');
});
function sendFile(req, res, filePath, stats) {
  //設(shè)置文件內(nèi)容類型
  res.setHeader('Content-Type', mime.getType(filePath));
  //設(shè)置資源最后修改時(shí)間頭信息
  res.setHeader('Last-Modified', stats.ctime.toGMTString());
  //通過管道將文件數(shù)據(jù)發(fā)送給客戶端
  fs.createReadStream(filePath).pipe(res);
}
server.on('request', function (req, res) {
  let {pathname} = url.parse(req.url, true);
  //獲取文件真實(shí)路徑
  let filePath = path.join(__dirname, pathname);
  //判斷文件是否存在
  fs.stat(filePath, function (err, stats) {
    if (err) {
      return res.end(util.inspect(err));
    }
    if (!stats.isFile()) {
      return res.end('is not file');
    }
    //獲取客戶端請求的If-Modified-Since頭信息
    let ifModifiedSince = req.headers['if-modified-since'];
    if (ifModifiedSince) {
      //如果最后修改時(shí)間相同，說明該資源并未修改，直接響應(yīng) 304，讓瀏覽器從緩存中獲取數(shù)據(jù)。
      if (ifModifiedSince == stats.ctime.toGMTString()) {
        res.statusCode = 304;
        res.end();
      } else {
        sendFile(req, res, filePath, stats);
      }
    } else {
      sendFile(req, res, filePath, stats);
    }
  });
});

通過最后修改時(shí)間判斷緩存是否可用，并不是很精確，有如下幾個(gè)問題：

1、Last-Modified 只精確到秒，秒以下的時(shí)間修改，將無法準(zhǔn)確判斷。

2、文件最后修改時(shí)間變了，但 內(nèi)容并沒有發(fā)生改變。

3、文件存在于多個(gè) CDN 上，那該文件的最后修改時(shí)間是不一樣的。

四、通過 ETag / If-None-Match 進(jìn)行判斷

ETag 表示 實(shí)體標(biāo)簽，將內(nèi)容通過 hash 算法生成一段字符串，用以標(biāo)識資源，如果資源發(fā)生變化，則 ETag 也會(huì)變化。

ETag 是服務(wù)器生成的，發(fā)送給客戶端的。

1、客戶端請求資源，服務(wù)器根據(jù)資源生成ETag，發(fā)送給客戶端。瀏覽器會(huì)保存該信息。

2、當(dāng)客戶端再次請求時(shí)，瀏覽器會(huì)發(fā)送 If-None-Match 給服務(wù)器，值為第1步保存的信息，服務(wù)器通過該信息進(jìn)行判斷，資源是否修改過。

3、如果沒有修改過，則響應(yīng) 304 未更新，告訴瀏覽器使用保存的緩存。

4、如果修改過，則響應(yīng) 200，返回最新資源。

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const util = require('util');
const crypto = require('crypto');
const mime = require('mime');
//創(chuàng)建http服務(wù)器并監(jiān)聽端口
let server = http.createServer();
server.listen(1234, '0.0.0.0', function () {
  console.log('開始監(jiān)聽');
});
function sendFile(req, res, filePath, eTag) {
  //設(shè)置文件內(nèi)容類型
  res.setHeader('Content-Type', mime.getType(filePath));
  //設(shè)置ETag頭信息
  res.setHeader('ETag', eTag);
  //通過管道將文件數(shù)據(jù)發(fā)送給客戶端
  fs.createReadStream(filePath).pipe(res);
}
server.on('request', function (req, res) {
  let {pathname} = url.parse(req.url, true);
  //獲取文件真實(shí)路徑
  let filePath = path.join(__dirname, pathname);
  //判斷文件是否存在
  fs.stat(filePath, function (err, stats) {
    if (err) {
      return res.end(util.inspect(err));
    }
    if (!stats.isFile()) {
      return res.end('is not file');
    }
    //獲取客戶端請求的If-None-Match頭信息
    let ifNoneMatch = req.headers['if-none-match'];
    //創(chuàng)建可讀流
    let rs = fs.createReadStream(filePath);
    //創(chuàng)建md5算法
    let md5 = crypto.createHash('md5');
    rs.on('data', function (data) {
      md5.update(data);
    });
    rs.on('end', function () {
      let eTag = md5.digest('hex');
      if (ifNoneMatch) {
        //判斷eTag與客戶端發(fā)送過來的If-None-Match是否相等
        if (ifNoneMatch == eTag) {
          res.statusCode = 304;
          res.end();
        } else {
          sendFile(req, res, filePath, eTag);
        }
      } else {
        sendFile(req, res, filePath, eTag);
      }
    });
  });
});

五、讓瀏覽器在緩存有效期內(nèi)不用發(fā)請求

Expires 是http1.0的內(nèi)容，用于設(shè)置緩存的有效期，在有效期內(nèi)瀏覽器直接從瀏覽器緩存中獲取數(shù)據(jù)。

Cache-Control 與Expires作用一樣，是http1.1的內(nèi)容，用于指明當(dāng)前資源的有效期，優(yōu)先級高于Expires。

Cache-Control可以設(shè)置的值 ：

1、private 客戶端可以緩存

2、public  客戶端和代理服務(wù)器都可以緩存

3、max-age=10 緩存內(nèi)容在10秒后失效

4、no-cache 使用對比緩存驗(yàn)證，強(qiáng)制向服務(wù)器驗(yàn)證

5、no-store 內(nèi)容都不緩存，強(qiáng)制緩存和對比緩存都不會(huì)觸發(fā)

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const util = require('util');
const mime = require('mime');
//創(chuàng)建http服務(wù)器并監(jiān)聽端口
let server = http.createServer();
server.listen(1234, '0.0.0.0', function () {
  console.log('開始監(jiān)聽');
});
function sendFile(req, res, filePath, stats) {
  //設(shè)置文件內(nèi)容類型
  res.setHeader('Content-Type', mime.getType(filePath));
  //設(shè)置緩存失效時(shí)間60秒
  res.setHeader('Expires', new Date(Date.now() + 60 * 1000).toUTCString());
  //設(shè)置緩存失效時(shí)間60秒
  res.setHeader('Cache-Control', 'max-age=60');
  //通過管道將文件數(shù)據(jù)發(fā)送給客戶端
  fs.createReadStream(filePath).pipe(res);
}
server.on('request', function (req, res) {
  let {pathname} = url.parse(req.url, true);
  //獲取文件真實(shí)路徑
  let filePath = path.join(__dirname, pathname);
  //判斷文件是否存在
  fs.stat(filePath, function (err, stats) {
    if (err) {
      return res.end(util.inspect(err));
    }
    if (!stats.isFile()) {
      return res.end('is not file');
    }
    sendFile(req, res, filePath, stats)
  });
});

希望本文所述對大家node.js程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手