實踐示例理解js強緩存協商緩存

 更新時間:2022年07月04日 16:40:29   作者:Sunshine_Lin  
這篇文章主要為大家以實踐示例理解js強緩存協商緩存,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

背景

無論是開發中或者是面試中,HTTP緩存都是非常重要的,這體現在了兩個方面:

  • 開發中:合理利用HTTP緩存可以提高前端頁面的性能
  • 面試中:HTTP緩存是面試中的高頻問點

所以本篇文章,我不講廢話,我就通過Nodejs的簡單實踐,給大家講最通俗易懂的HTTP緩存,大家通過這篇文章一定能了解掌握它?。?!

前置準備

準備

  • 創建文件夾cache-study,并準備環境
npm init
  • 安裝Koa、nodemon
npm i koa -D
npm i nodemon -g
  • 創建index.js、index.html、static文件夾
  • index.html
<!DOCTYPE html>
<html lang="en">
<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>
  <link rel="stylesheet" href="./static/css/index.css" rel="external nofollow" >
</head>
<body>
  <div class="box">
  </div>
</body>
</html>
  • static/css/index.css
.box {
  width: 500px;
  height: 300px;
  background-image: url('../image/guang.jpg');
  background-size: 100% 100%;
  color: #000;
}
  • static/image/guang.jpg

  • index.js
const Koa = require('koa')
const fs = require('fs')
const path = require('path')
const mimes = {
  css: 'text/css',
  less: 'text/css',
  gif: 'image/gif',
  html: 'text/html',
  ico: 'image/x-icon',
  jpeg: 'image/jpeg',
  jpg: 'image/jpeg',
  js: 'text/javascript',
  json: 'application/json',
  pdf: 'application/pdf',
  png: 'image/png',
  svg: 'image/svg+xml',
  swf: 'application/x-shockwave-flash',
  tiff: 'image/tiff',
  txt: 'text/plain',
  wav: 'audio/x-wav',
  wma: 'audio/x-ms-wma',
  wmv: 'video/x-ms-wmv',
  xml: 'text/xml',
}
// 獲取文件的類型
function parseMime(url) {
  // path.extname獲取路徑中文件的后綴名
  let extName = path.extname(url)
  extName = extName ? extName.slice(1) : 'unknown'
  return mimes[extName]
}
// 將文件轉成傳輸所需格式
const parseStatic = (dir) => {
  return new Promise((resolve) => {
    resolve(fs.readFileSync(dir), 'binary')
  })
}
const app = new Koa()
app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 訪問根路徑返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    // 設置類型
    ctx.set('Content-Type', parseMime(url))
    // 設置傳輸
    ctx.body = await parseStatic(filePath)
  }
})
app.listen(9898, () => {
  console.log('start at port 9898')
})

啟動頁面

現在你可以在終端中輸入nodemon index,看到下方的顯示,則代表成功啟動了服務

此時你可以在瀏覽器鏈接里輸入http://localhost:9898/,打開看到如下頁面,則代表頁面訪問成功?。?!

HTTP緩存種類

HTTP緩存常見的有兩類:

強緩存:可以由這兩個字段其中一個決定

  • expires
  • cache-control(優先級更高)

協商緩存:可以由這兩對字段中的一對決定

Last-Modified,If-Modified-Since

Etag,If-None-Match(優先級更高)

強緩存

接下來我們就開始講強緩存

expires

我們只需設置響應頭里expires的時間為當前時間 + 30s就行了

app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 訪問根路徑返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    // 設置類型
    ctx.set('Content-Type', parseMime(url))
    // 設置 Expires 響應頭
    const time = new Date(Date.now() + 30000).toUTCString()
    ctx.set('Expires', time)
    // 設置傳輸
    ctx.body = await parseStatic(filePath)
  }
})

然后我們在前端頁面刷新,我們可以看到請求的資源的響應頭里多了一個expires的字段

并且,在30s內,我們刷新之后,看到請求都是走memory,這意味著,通過expires設置強緩存的時效是30s,這30s之內,資源都會走本地緩存,而不會重新請求

注意點:有時候你Nodejs代碼更新了時效時間,但是發現前端頁面還是在走上一次代碼的時效,這個時候,你可以把這個Disabled cache打鉤,然后刷新一下,再取消打鉤

cache-control

其實cache-control跟expires效果差不多,只不過這兩個字段設置的值不一樣而已,前者設置的是秒數,后者設置的是毫秒數

app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 訪問根路徑返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    // 設置類型
    ctx.set('Content-Type', parseMime(url))
    // 設置 Cache-Control 響應頭
    ctx.set('Cache-Control', 'max-age=30')
    // 設置傳輸
    ctx.body = await parseStatic(filePath)
  }
})

前端頁面響應頭多了cache-control這個字段,且30s內都走本地緩存,不會去請求服務端

協商緩存

與強緩存不同的是,強緩存是在時效時間內,不走服務端,只走本地緩存;而協商緩存是要走服務端的,如果請求某個資源,去請求服務端時,發現命中緩存則返回304,否則則返回所請求的資源,那怎么才算命中緩存呢?接下來講講

Last-Modified,If-Modified-Since

簡單來說就是:

  • 第一次請求資源時,服務端會把所請求的資源的最后一次修改時間當成響應頭中Last-Modified的值發到瀏覽器并在瀏覽器存起來
  • 第二次請求資源時,瀏覽器會把剛剛存儲的時間當成請求頭中If-Modified-Since的值,傳到服務端,服務端拿到這個時間跟所請求的資源的最后修改時間進行比對
  • 比對結果如果兩個時間相同,則說明此資源沒修改過,那就是命中緩存,那就返回304,如果不相同,則說明此資源修改過了,則沒命中緩存,則返回修改過后的新資源
// 獲取文件信息
const getFileStat = (path) => {
  return new Promise((resolve) => {
    fs.stat(path, (_, stat) => {
      resolve(stat)
    })
  })
}
app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 訪問根路徑返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    const ifModifiedSince = ctx.request.header['if-modified-since']
    const fileStat = await getFileStat(filePath)
    console.log(new Date(fileStat.mtime).getTime())
    ctx.set('Cache-Control', 'no-cache')
    ctx.set('Content-Type', parseMime(url))
    // 比對時間,mtime為文件最后修改時間
    if (ifModifiedSince === fileStat.mtime.toGMTString()) {
      ctx.status = 304
    } else {
      ctx.set('Last-Modified', fileStat.mtime.toGMTString())
      ctx.body = await parseStatic(filePath)
    }
  }
})

第一次請求時,響應頭中:

第二次請求時,請求頭中:

由于資源并沒修改,則命中緩存,返回304:

此時我們修改一下index.css

.box {
  width: 500px;
  height: 300px;
  background-image: url('../image/guang.jpg');
  background-size: 100% 100%;
  /* 修改這里 */
  color: #333;
}

然后我們刷新一下頁面,index.css變了,所以會沒命中緩存,返回200和新資源,而guang.jpg并沒有修改,則命中緩存返回304:

Etag,If-None-Match

其實Etag,If-None-Match跟Last-Modified,If-Modified-Since大體一樣,區別在于:

  • 后者是對比資源最后一次修改時間,來確定資源是否修改了
  • 前者是對比資源內容,來確定資源是否修改

那我們要怎么比對資源內容呢?我們只需要讀取資源內容,轉成hash值,前后進行比對就行了??!

const crypto = require('crypto')
app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 訪問根路徑返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    const fileBuffer = await parseStatic(filePath)
    const ifNoneMatch = ctx.request.header['if-none-match']
    // 生產內容hash值
    const hash = crypto.createHash('md5')
    hash.update(fileBuffer)
    const etag = `"${hash.digest('hex')}"`
    ctx.set('Cache-Control', 'no-cache')
    ctx.set('Content-Type', parseMime(url))
    // 對比hash值
    if (ifNoneMatch === etag) {
      ctx.status = 304
    } else {
      ctx.set('etag', etag)
      ctx.body = fileBuffer
    }
  }
})

驗證方式跟剛剛Last-Modified,If-Modified-Since的一樣,這里就不重復說明了。。。

總結

參考 http://www.gpbgw.com/article/254078.htm

以上就是實踐示例理解js強緩存協商緩存的詳細內容,更多關于js強緩存協商緩存的資料請關注腳本之家其它相關文章!

相關文章

  • 微信小程序頁面傳值實例分析

    微信小程序頁面傳值實例分析

    這篇文章主要介紹了微信小程序頁面傳值實例分析的相關資料,需要的朋友可以參考下
    2017-04-04
  • 微信小程序 數組(增,刪,改,查)等操作實例詳解

    微信小程序 數組(增,刪,改,查)等操作實例詳解

    這篇文章主要介紹了微信小程序 數組(增,刪,改,查)等操作實例詳解的相關資料,這里對小程序的數組進行操作,簡單實例,需要的朋友可以參考下
    2017-01-01
  • javascript對象3個屬性特征

    javascript對象3個屬性特征

    這篇文章主要介紹了javascript對象3個屬性特征,writable可寫、enumerable可枚舉、configurable可配置,下面來看看文章的詳細內容吧
    2021-11-11
  • 微信小程序 video組件詳解

    微信小程序 video組件詳解

    這篇文章主要介紹了微信小程序 video組件詳解的相關資料,需要的朋友可以參考下
    2016-10-10
  • 微信小程序商品到詳情的實現

    微信小程序商品到詳情的實現

    這篇文章主要介紹了微信小程序商品到詳情的實現的相關資料,需要的朋友可以參考下
    2017-06-06
  • JQ中$(window).load和$(document).ready區別與執行順序

    JQ中$(window).load和$(document).ready區別與執行順序

    JQ中的$(document).ready()大家應該用的非常多,基本每個JS腳本中都有這個函數的出現有時甚至會出現多個,那么另一個加載函數$(window).load相對出現的次數就很少了,下面為大家介紹一下兩者的區別與他們的執行順序
    2017-03-03
  • 微信小程序 頁面傳值詳解

    微信小程序 頁面傳值詳解

    這篇文章主要介紹了微信小程序 頁面傳值詳解的相關資料,需要的朋友可以參考下
    2017-03-03
  • JavaScript異步操作中串行和并行

    JavaScript異步操作中串行和并行

    這篇文章主要介紹了JavaScript異步操作中串行和并行,主要內容是寫一下js中es5和es6針對異步函數,串行執行和并行執行的方案。已經串行和并行結合使用的例子。,需要的朋友可以參考一下
    2021-11-11
  • JS ES新特性 模板字符串

    JS ES新特性 模板字符串

    這篇文章主要介紹了JS ES新特性模板字符串,模板字符串即Template String是增強版的字符串,使用反引號(```)來代替譜通字符串中的用雙引號和單引號,更多相關介紹,需要的朋友可以參考下面文章的詳細內容
    2021-12-12
  • Google 地圖API Map()構造器詳解

    Google 地圖API Map()構造器詳解

    本文主要介紹Google 地圖API Map(),這里對Map()構造器的知識做了一下整理以及提供簡單的代碼示例,開發Google 地圖應用的朋友可以參考下
    2016-08-08

最新評論

美丽人妻被按摩中出中文字幕