前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >web缓存介绍

web缓存介绍

作者头像
OECOM
发布于 2020-07-02 03:30:13
发布于 2020-07-02 03:30:13
1.1K0
举报
文章被收录于专栏:OECOMOECOM

web缓存是什么,其实就是一些静态的资源及数据存储到本地浏览器或者是服务器上。缓存会根据进来的请求保存输出内容的副本,当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。

Web缓存的类型

缓存有很多分类,数据库缓存,redis缓存、服务器缓存、还有类似七牛静态资源的cdn缓存以及浏览器缓存。下面重点来说一下cdn缓存和浏览器缓存。

cdn缓存

首先是从用户在地址栏或者是点击某个连接开始请求一个url开始,浏览器开始将解析后的域名发送给dns服务器,返回该域名对应的 CNAME,此时浏览器需要再次对获得的 CNAME 进行解析,才能得到 CDN 缓存服务器的 IP 地址。在此过程中全局负载均衡 DNS 解析服务器会将用户的访问请求定位到离用户最近、负载最轻的 CDN 缓存服务器上。这种技术也被称为“DNS 重定向”,DNS 服务器不是为每个请求返回相同的 IP 地址,比如在悉尼的一个客户请求解析 www.dns.com ,DNS 服务器根据地理位置,计算出距离这个用户最近的cdn服务器,用户访问时间将被大大缩减。每隔一定时间cdn服务器会向资源服务器请求,或者资源服务器发送请求,以保障cdn节点内容一致。

浏览器缓存是将文件缓存到本地或者是一些数据缓存到本地。在同一个会话过程中会检查缓存的副本是否是最近的,当点击后退或刷新时,访问过的资源可以从浏览器缓存中拿出使用。通过减少服务器处理请求的数量,用户将获得更快的体验。数据缓存指的是localStorage或者是sessionStorage、cookie等。

下面重点说一下使用web端最多的浏览器缓存。我们可以通过header来控制浏览器的缓存。

Cache-Control

1.max-age(单位为s)指定设置缓存最大的有效时间,定义的是时间长短。当浏览器向服务器发送请求后,在max-age这段时间里浏览器就不会再向服务器发送请求了。比如将一个网站的的max-age设置为2592000,也就是说缓存有效期为2592000秒(也就是30天)。于是在30天内都会使用这个版本的资源,即使服务器上的资源发生了变化,浏览器也不会得到通知。

2.s-maxage,这个属性和max-age类似,只不过max-age应用于普通缓存,s-maxage应用于共享缓存(比如cdn缓存)。s-maxage存在是会覆盖掉max-age和Expires

3.public应用于公共缓存,如果没有指定public还是private,则默认为public。与其相对的是private,该响应只作为私有的缓存,不能在用户间共享。如果要求HTTP认证,响应会自动设置为private

pubic:

private:

  1. no-cache 指定不缓存响应,表明资源不进行缓存,但是设置了no-cache之后并不代表浏览器不缓存,而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险,还可以加上private指令,将过期时间设为过去的时间。如果想要彻底不缓存可以使用no-store

Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age + 请求时间,需要和Last-modified结合使用。cache-control的优先级要高于max-age。 Expires是Web服务器响应消息头字段,当浏览器再次进行请求时,会向服务器传送If-Modified-Since报头,询问Last-Modified时间点之后资源是否被修改过。如果没有修改,则返回码为304,使用缓存;如果修改过,则再次去服务器请求资源,返回码和首次请求相同为200,资源为服务器最新资源。

ETag

根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生。浏览器会将这串字符串传回服务器,验证资源是否已经修改,如果没有修改

使用ETag可以解决Last-modified存在的一些问题:

  1. 某些服务器不能精确得到资源的最后修改时间,这样就无法通过最后修改时间判断资源是否更新
  2. 如果资源修改非常频繁,在秒以下的时间内进行修改,而Last-modified只能精确到秒
  3. 一些资源的最后修改时间改变了,但是内容没改变,使用ETag就认为资源还是没有修改的。

至于localStorag和sessionStorage可参考localStorage和sessionStorage用法小总结

cookie可参考:操作cookie信息

文章参考连接:http://www.alloyteam.com/2016/03/discussion-on-web-caching/#prettyPhoto

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Web缓存 - HTTP协议缓存
Web缓存一般分为浏览器缓存、代理服务器缓存以及网关缓存,本文主要讲的是 浏览器缓存,其它两种缓存大家自行去了解下。
laixiangran
2018/07/25
9900
Web缓存 - HTTP协议缓存
浅谈浏览器缓存
最近在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结一下。
前端下午茶
2018/10/22
1.5K0
浅谈浏览器缓存
缓存策略
根据文章内容总结为摘要总结。
IMWeb前端团队
2018/01/08
1.7K0
缓存策略
Nginx缓存详解(一)之客户端缓存
缓存对于Web服务至关重要,尤其对于大型高负载Web站点。缓存作为性能优化的一个重要手段,可以在极大程度上减轻后端服务器的负载。通常对于静态资源,即不经常更新的资源,如图片,CSS或JS等进行缓存,而不用每次都向服务器请求,这样就可以减轻服务器的压力。
Se7en258
2021/05/18
2.2K5
Nginx缓存详解(一)之客户端缓存
Nginx下关于缓存控制字段cache-control的配置说明 - 运维小结
HTTP协议的Cache -Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程。 请求时的缓存指令包括: no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached等。 响应消息中的指令包括: public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。
洗尽了浮华
2019/05/25
8.9K0
[译] HTTP 缓存头部 - 完全指南
原文: http://cncc.bingj.com/cache.aspx?q=max-age+expires+Last-Modified&d=4997458151473641&mkt=en-US&se
江米小枣
2020/06/16
1.3K0
[译] HTTP 缓存头部 - 完全指南
浏览器缓存机制剖析
这是判断是否启用缓存的第一步。如果浏览器通过某些条件(条件之后再说)判断出来,ok现在这个缓存没有过期可以用,那么连请求都不会发的,直接是启用之前浏览器缓存下来的那份文件,此时状态码为200
用户1263954
2018/07/30
6560
浏览器缓存机制剖析
亿及流量多级缓存 - 客户端缓存
在HTTP协议中If-Modified-Since和If-None-Match分别对应Last-Modified和ETag
Parker
2020/07/22
9050
缓存从入门到放弃
缓存就是数据交换的缓冲区(称作Cache),这个概念最初是来自于内存和CPU。当某一硬件要读取数据时,会首先从缓存中查找需要的数据,如果找到了则直接执行,找不到的话则从内存中找。由于缓存的运行速度比内存快得多,故缓存的作用就是帮助硬件更快地运行
前端黑板报
2018/12/21
9240
浏览器缓存机制剖析
“缓存一直是前端优化的主战场,利用好缓存就成功了一半。本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存 和 启发式缓存是如此的简单。 ” 导读 浏览器对
CSDN技术头条
2018/02/12
1.4K0
浏览器缓存机制剖析
HTTP缓存,浏览器缓存
可分为两大类:http缓存和浏览器缓存。我们今天重点讲的是http缓存,所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点:
回忆大大
2023/03/19
9790
HTTP缓存,浏览器缓存
浏览器缓存知识点
对于强制缓存来说,header中会有两个字段来标明失效规则(Expires/Cache-Control),指的是当前资源的有效期。
上山打老虎了
2022/06/14
3090
浏览器缓存知识点
HTTP缓存相关知识介绍
HTTP协议的缓存是通过6个报文头完成的,通过两层协商使web资源能够不那么频繁地在服务器与客户端之间传递,从而节约了流量,提高浏览速度。以从客户端到服务器的顺序,第一层协商为Cache-Control与Expires;第二层协商为Last-Modified与Etag。
小明互联网技术分享社区
2022/02/17
3080
HTTP缓存相关知识介绍
如何用缓存(Cache)进行前端性能优化?
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术,可减少等待时间和网络流量,显著提升网站性能。
Learn-anything.cn
2021/11/30
8340
浏览器缓存机制浅析
  浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:
全栈程序员站长
2022/07/05
5330
浏览器缓存机制浅析
Web前端性能优化(三)
因为HTTP请求无状态,当这一次 HTTP 请求结束之后,这个链接就关闭了,而下一次需要发起这个请求时,服务端不会知道这个请求是和之前某一个请求,来自同一个客户端的,不能跟踪 HTTP 请求的会话和发生情况,在这种场景下,就很难去处理登录信息、用户信息的维护问题,所以需要 Cookie 去维持客户端状态,需要注意的是,Cookie 是存在过期时间 expire 的
Nian糕
2019/05/14
6870
Web前端性能优化(三)
相关推荐
Web缓存 - HTTP协议缓存
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文