置顶 前端性能优化之HTTP缓存策略

技术 解决方案 随笔

HTTP

2020-07-24 13:12:47

331

作者:黑夜男神

很多时候,当打开浏览器的开发者工具,查看网络请求,对于资源大小(Size)选项,除了有具体的数字大小,还有from memory cache、from disk cache字段之类出现。


缓存位置

  • 从字面意思理解,大概也能猜到,这些字段代表着缓存位置。 按优先级,Size选项字段可分为:
  • from Service Worker
  • from memory cache
  • from disk cache
  • 真正的网络请求(显示资源的具体大小)

Service Worker

本质是作为服务器与客户端之间的代理服务器,伴随着PWA出现。Service Worker真正意义上将缓存控制权交给了前端,相比于LocalStorage、SessionStorage,后两者只是单纯的接口数据缓存,例如用户信息(一个对象)、列表信息(一个数组),而前者可以缓存静态资源,甚至拦截网络请求,根据网络状况作出不同的缓存策略。当然,这不是本文讨论的重点。

memory cache

顾名思义,这个是将资源缓存在了内存中。事实上,所有的网络请求都会被浏览器缓存到内存中,当然,内存容量有限,缓存不能无限存放在内存中,因此,注定是个短期缓存。内存缓存的控制权在浏览器,前后端都不能干涉。

disk cache

与内存缓存相对的,这个是将资源缓存在硬盘中。虽然相比于内存,硬盘的读取速度要慢很多,但总比没有强。 硬盘缓存的控制权在后端,通过什么控制呢

缓存策略

disk cache也叫http cahce,因为其严格遵守http响应头字段来判断哪些资源是否要被缓存,哪些资源是否已经过期。绝大多数缓存都是disk cache。disk cahce分为强制缓存与对比缓存。

强制缓存

控制强制缓存的有两种http响应头字段:Expires: Fri, 08 Feb 2019 05:37:33 GMT 字段的值就代表了资源的过期时间,不过这个值是相对于客户端,并且客户端本地时间可以任意修改,因此这个字段并不可靠。Expires字段是Http 1.0的,Http 1.1 用Cache-Control字段替代它:Cache-Control: max-age=2592000 Cache-control字段使用了绝对时间,单位为秒,即最大有效时间,在有效时间内,客户端直接从硬盘中读取资源。

看个例子,用Node.js搭建一个静态资源服务器,设置Cache-Control: max-age=2592000,每次请求都会被服务器打印出:

看个例子,用Node.js搭建一个静态资源服务器,设置Cache-Control: max-age=2592000,每次请求都会被服务器打印出:

const server = http.createServer((req, res) => {    
      console.log(`收到请求,请求地址为: ${req.url}`);
    fs.readFile(path.resolve(__dirname, './image.png'), (err, file) => {        if (err) {
         res.end(err.message);
     }

    res.setHeader('Cache-control', 'max-age=2592000');
    res.end(file);
    });
}).listen(3000);console.log('localhost:3000服务已开启!');

https://blog.csdn.net/QQ729533020/article/details/99739925

评论 (3)

用户名
邮箱
评论
  • 4hf 2021-04-20 13:48:20

    专业礼品代发,就找88礼品网。http://www.88lp.cn

    • rg 2021-04-11 13:49:43

      88礼品网专业提供快递单号 物流单号 礼品代发的网站。http://www.88lp.cn

      • 黑夜 2020-07-24 13:33:47

        可以哦

        Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号