淄博做网站建设,wordpress 主题调试,经典网站设计案例,.net做的学校网站什么是缓存
浏览器缓存就是把一个已经请求过的Web资源#xff08;如html页面#xff0c;图片#xff0c;js#xff0c;数据等#xff09;拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候#xff0c;如果是相同的URL#…什么是缓存
浏览器缓存就是把一个已经请求过的Web资源如html页面图片js数据等拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候如果是相同的URL缓存会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页当再次访问这个URL地址的时候如果网页没有更新就不会再次下载网页而是直接使用本地缓存的网页。 缓存有什么作用
浏览器缓存BrowserCaching是为了节约网络的资源加速浏览浏览器在用户磁盘上对最近请求过的文档进行存储当访问者再次请求这个页面时浏览器就可以从本地磁盘显示文档这样就可以加速页面的显示。 浏览器缓存优点
①.减少网络带宽消耗
无论对于网站运营者或者用户带宽都代表着金钱过多的带宽消耗只会便宜了网络运营商。当Web缓存副本被使用时只会产生极小的网络流量可以有效的降低运营成本。
②.降低服务器压力
给网络资源设定有效期之后用户可以重复使用本地的缓存减少对源服务器的请求间接降低服务器的压力。同时搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率也能有效降低服务器的压力。
③.减少网络延迟加快页面打开速度
带宽对于个人网站运营者来说是十分重要而对于大型的互联网公司来说可能有时因为钱多而真的不在乎。那Web缓存还有作用吗答案是肯定的对于最终用户缓存的使用能够明显加快页面打开速度达到更好的体验。 浏览器缓存缺点
在项目开发阶段因为缓存的原因导致资源没有及时更新而看不到最新的效果。 浏览器缓存又分为强缓存和协商缓存两种。
强缓存
http1.0 的 expires
http1.0 中通过头部字段 expires 定义缓存有效时间。expires 是一个绝对的日期。那么这个绝对值是取决于服务器如果服务器和客户端的时间并不一致那么就可能导致缓存过早失效或客户端使用已经过期的缓存。
http1.1 的 Cache-Control
为了解决这个问题在http1.1中引入了Cache-Control字段是最重要的规则可以通过 max-age(单位为秒) 主要用于控制网页缓存主要取值为
Cache-Control 的值配置如下
请求头
no-cache: 使用本地缓存必须向服务器验证no-store: 不缓存该请求的任何内容max-age: 响应的最大有效时间max-stale: 接受过期多久的缓存min-fresh: 期望在指定时间内的响应仍然有效no-transform: 代理不可更改媒体类型only-if-cached: 从缓存获取资源cache-extension新指令的标记
响应头
public: 任何机器都可以缓存。private: 只允许特定的人缓存。no-cache要求客户端使用缓存时必须向服务器确认。no-store不允许任何缓存no-transform代理不能更改媒体类型must-revalidate可以缓存但是必须向服务器确认proxy-revalidate中间代理必须对响应缓存的有效性再次确认max-age最大缓存有效时间s-maxage中间服务器最大缓存时间cache-extension新指令标记Cache-Control缓存原理
①.浏览器第一次跟服务器请求一个资源服务器在返回这个资源的同时在respone的header加上Cache-Control
②.浏览器在接收到这个资源后会把这个资源连同所有response header一起缓存下来
③.浏览器再请求这个资源时先从缓存中寻找找到这个资源后根据它第一次的请求时间和Cache-Control设定的有效期计算出一个资源过期时间再拿这个过期时间跟当前的请求时间比较如果请求时间在过期时间之前就能命中缓存否则就不行
④.如果缓存没有命中浏览器直接从服务器加载资源时Cache-Control Header在重新加载的时候会被更新 协商缓存
强缓存过期后进入了协商缓存阶段。这个阶段目的在于判断本地缓存是否还有效。如果有效则服务器会通知浏览器使用本地缓存。
通常我们实现协商缓存有两种方式。
Last-Modified / IF-Modified-Since
通过 Last-modified/if-Modified-Since 实现当服务响应请求时会将 Last-Modified 设置在响应头中浏览器会记录该字段。当该文件过期后浏览器会将第一次收到的 Last-Modified 的值设置到 请求头的 If-Modified-Since 字段中。服务器收到请求取出 If-Modified-Since 字段与文件修改时间对比如果没有改变就 返回 304(not modified)并更新浏览器缓存资源有效期。如果不相同则返回该请求的资源。缺点只能判断秒级的改变当变化文件在1秒以内浏览器会认为缓存命中返回 304。为了解决这个问题HTTP1.1 引入 ETag
Etag / IF-None-Match
ETag 是通过 hash 算法计算出来的文件唯一标识。当文件改变其计算出来的hash值也将是不同的。当浏览器第一请求资源时服务器会计算出文件的 hash 值并将得到值 设置到响应头的 ETag 上。浏览器接收响应保存 ETag。当浏览缓存过期时就将保存的 ETag 值设置在 请求头的 If-None-Match 上。服务器接收该请求取出If-None-Match 值并和服务器保存的文件进行 hash 比对。如果一样则 返回 304并更新过期时间。不一样则返回新的文件。缺点 hash 值的计算需要服务器的处理如果用户量巨大。通过 ETag 进行协商缓存对性能的浪费是巨大的。ETag 的出现并不是要代替 Last-Modified 的。为什么要有 Etag
HTTP1.1 中 Etag 的出现主要是为了解决几个 Last-Modified 比较难解决的问题
一些文件也许会周期性的更改但是内容并不改变(仅仅改变的修改时间)这个时候我们并不希望客户端认为这个文件被修改了而重新 GET某些文件修改非常频繁比如在秒以下的时间内进行修改(比方说 1s 内修改了 N 次)If-Modified-Since 能检查到的粒度是秒级的使用 Etag 就能够保证这种需求下客户端在 1 秒内能刷新 N 次 cache。某些服务器不能精确的得到文件的最后修改时间。协商缓存总结如下
请求资源时把用户本地该资源的 etag 同时带到服务端服务端和最新资源做对比。 如果资源没更改返回304浏览器读取本地缓存。 如果资源有更改返回200返回最新的资源。 不能缓存的请求
当然并不是所有请求都能被缓存无法被浏览器缓存的请求如下
①.HTTP信息头中包含Cache-Control:no-cachepragma:no-cache或Cache-Control:max-age0等告诉浏览器不用缓存的请求
②.需要根据Cookie认证信息等决定输入内容的动态请求是不能被缓存的
③.经过HTTPS安全加密的请求
④.POST请求无法被缓存
⑤.HTTP响应头中不包含Last-Modified/Etag也不包含Cache-Control/Expires的请求无法被缓存 用户行为对缓存的影响
用户操作Expires/Cache-ControlLast-Modied/Etag地址栏回车有效有效页面链接跳转有效有效新开窗口有效有效前进回退有效有效F5 刷新效(有争议不同浏览器反馈不一致)有效CtrlF5 强制刷新无效无效怎么设置强缓存与协商缓存
后端服务器如nodejs
res.setHeader(max-age: 3600 public)
res.setHeader(etag: 5c20abbd-e2e8)
res.setHeader(last-modified: Mon, 24 Dec 2018 09:49:49 GMT)
Nginx 配置
add_header Cache-Control max-age3600
