首页 > 云开发 > HTML5 > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

缓存浅析

HTML5

概念
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。——MDN

缓存能缓解服务器压力,提高响应速度,提升用户体验。

以下讨论的缓存是针对对img/script/css资源而言的,且缓存策略都是依靠 http 报文的首部来实现。

实验 搭建实验环境

编写 html 文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="data:;base64,=">
  <title>缓存</title>
</head>

<body>
  <img style="width:400px;" src="sun.jpg">
  <div>
    缓存实验
  </div>
</body>

</html>

服务端代码

const path = require('path')
const url = require('url')
const fs = require('fs')
const zlib = require('zlib')

const img = fs.readFileSync(path.resolve(__dirname, './static/sun.jpg'), 'binary')

http.createServer((req, res) => {
  const html = fs.createReadStream(path.resolve(__dirname, './static/index.html'))
  let {
    pathname
  } = url.parse(req.url)
  if (pathname === '/') {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Content-Encoding': 'gzip'
    })
    html.pipe(zlib.createGzip()).pipe(res)
  } else if (pathname === '/sun.jpg') {
    res.writeHead(200, {
      'Content-Type': 'image/jpeg'
    })
    res.write(img, 'binary')
    res.end()
  } else {
    res.end(pathname)
  }
}).listen(3210)

访问 http://localhost:3210 , 看到相应的文档和图片,且无论刷新多少次,sun.jpg 的 Status 和 Size 都不变。控制台里勾选 Preserve log

Cache-Control

通过在服务端设置相应首部 Cache-Control 可以控制缓存行为,例如

Cache-Control: no-cache, 告诉浏览器,下次请求该资源时,不直接使用缓存,而是向服务端发送请求,服务端会根据请求,判断本地的资源是否过期

Cache-Control: no-store, 告诉浏览器,不要缓存该资源

Cache-Control: max-age=age, 告诉浏览器,这个资源有效的时长 age,在该时间范围内,如果需要该资源,直接从本地取,不要烦我(向我发送请求)

修改服务端代码

设置图片缓存时长 30s

res.writeHead(200, {
      'Content-Type': 'image/jpeg',
      'Cache-Control': 'max-age=30'
    })

快速刷新页面2次,超过30s后,再刷新一次

三次刷新结果在控制台显示的情况如下


其中第二次请求 sun.jpg 的请求情况如下,200 OK (from memory cache),第三次请求 sun.jpg 则又是从服务端获取图片,显示资源 1.6M。

Last-Modified & If-Modified

现在的情形是这样的,30s到了,浏览器向服务端发出 sun.jpg 的请求,但服务器并没有更新该资源,所以服务器告诉浏览器,“我没有修改该资源,你还是用你本地的吧,我就不再发给你了”。这些通过 Last-Modified 和 If-Modified-Since 来实现。

浏览器第一次向服务端请求 sun.jpg,服务端不仅返回 sun.jpg,还通过响应首部的 Last-Modified(浏览器自动添加),告诉浏览器该资源最后修改的时间。

下次浏览器再次请求 sun.jpg,会通过请求首部的 If-Modified-Since, 把自己手上这个资源最后修改的时间告诉服务端,服务端通过这个时间,判断浏览器本地的资源是否是最新的,若是,则返回 304(not modified) 和响应头部即可,不用返回图片;若不是,则返回 200 和图片。

修改服务端代码
const http = require('http')
const path = require('path')
const url = require('url')
const fs = require('fs')
const zlib = require('zlib')

const img = fs.readFileSync(path.resolve(__dirname, './static/sun.jpg'), 'binary')
let date = new Date()
let lastModified = date.toUTCString()

http.createServer((req, res) => {
  const html = fs.createReadStream(path.resolve(__dirname, './static/index.html'))
  let {
    pathname
  } = url.parse(req.url)
  if (pathname === '/') {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Content-Encoding': 'gzip'
    })
    html.pipe(zlib.createGzip()).pipe(res)
  } else if (pathname === '/sun.jpg') {
    if (req.headers['if-modified-since'] === lastModified) {
      res.writeHead(304, {
        'Content-Type': 'image/jpeg',
        'Cache-Control': 'max-age=30',
        'Last-Modified': lastModified
      })
      res.end()
    } else {
      res.writeHead(200, {
        'Content-Type': 'image/jpeg',
        'Cache-Control': 'max-age=30',
        'Last-Modified': lastModified
      })
      res.write(img, 'binary')
      res.end()
    }
  } else {
    res.end(pathname)
  }
}).listen(3210)

浏览器刷新一次,30s内,再刷新一次,30s后再刷新一次

三次刷新的结果在控制台里显示如下,最后一次还有 189B 是服务端响应头部的大小,178ms 里包含了服务端比较修改时间,返回响应头部的时间。

且最后一次请求 sun.jpg 的请求情形如下

ETag & If-None-Match

Etag 和 If-None-Match 起到的作用和上文中 Last-Modified 和 If-Modified 差不多,区别在于 Etag 是服务端上通过算法给资源计算出的唯一标示,当资源修改时,该标示会发生变化。服务端通过响应首部 Etag 将该标示告诉浏览器,浏览器再下一次请求该资源时,会通过请求首部 If-None-Match 带上该标示,服务端会比较请求中的标示和该资源最新的标示,如果一样,证明浏览器拥有的该资源是最新的,仅返回304和响应头部,否则返回200和整个资源。

强制刷新

常使用的强制刷新就是通过修改请求首部来实现的

将 Cache-Control 和 Pragma 设为 no-cache,去除 If-Modified, If-None-Match

盗个图,HTTP缓存控制小结

快速更新

很多js文件或css文件的文件名会带有文件指纹或版本号,通过改变文件名,让浏览器以为请求的新的未缓存的资源从而实现快速更新。

参考

HTTP缓存控制小结

[浅谈浏览器http的缓存机制](http://www.cnblogs.com/vajoy/...

文章来源:segmentfault,作者:nbb3210。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

缓存 javascript

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索