http缓存和浏览器缓存

一、前言
前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生
效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-
Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定
是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新
获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓
存，主要过程如下：

HTTP请求缓存一般也是建立在get请求上面的，get和post的区别

一、强缓存

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

( 到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因不同步（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无意义。)

  Expire 绝对时间Cache-Control 相对时间

Cache-Control:

public：所有内容都将被缓存（客户端和代理服务器都可缓存）

private：所有内容只有客户端可以缓存，Cache-Control的默认取值

no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。那么from memory cache 和 from disk cache又分别代表的是什么呢？什么时候会使用from disk cache，什么时候会使用from memory cache呢？
from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk –> 服务器请求。

内存缓存(from memory cache)：内存缓存具有两个特点，分别是速度快和时间限制。
硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

二、协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高，因为Last-Modified的精度只精确到秒级，如果是毫秒级的改变，则会出现问题。E-tag只要文件改变，它就会改变

If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件，

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)

If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200，

注：Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。对于协商缓存，使用 Ctrl+F5强制刷新可以使得缓存无效。但是对于强缓存，在未过期时，必须更新资源路径才能发起新的请求（更改了路径相当于是另一个资源了，这也是前端工程化中常用到的技巧）。

强缓存不需要想服务器发起请求，协商缓存需要

三、浏览器缓存
Cookie主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。大小4KB
LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。大小跟浏览器相关，一般是5MB，相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口）
SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。大小跟浏览器相关，一般是5MB，但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

四、本地存储大容量
IndexDB主要用在前端有大容量存储需求的页面上，非关系型数据库，大小无限

五、往返缓存
往返缓存又称为BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。

http缓存和浏览器缓存相关推荐

如何清除360网站服务器缓存,360安全浏览器怎样清除缓存360浏览器缓存清理
<360安全浏览器怎样清除缓存360浏览器缓存清理>由会员分享,可在线阅读,更多相关<360安全浏览器怎样清除缓存360浏览器缓存清理(8页珍藏版)>请在人人文库网上搜索. 1 ...
彻底缓存与协商缓存（浏览器缓存）
前言: 浏览器缓存也称http在浏览器向服务器请求资源的时候,许多静态的资源是长时间不会更改的.如果重复的发起请求,不断从服务器获取长时间不会改变的资源,不仅会浪费宽带,增加服务器的压力,甚至影响到用 ...
DNS 缓存、CDN 缓存、浏览器缓存，JVM DNS 缓存详解
最近测试遇到修改host文件后,清除浏览器缓存后,重启浏览器后,发现浏览器还是访问老DNS服务,于是网上查查原因,豁然开朗. 这里对互联网上一些文章进行整理,原文可查看参. 1.DNS 缓存 1.1 ...
JS缓存与浏览器缓存技术详解学习笔记
缓存与浏览器缓存技术: 一,缓存: 缓存是网络传输中常用到的一种技术,利用缓存可以让我们在数据传输方面更加的方便和快捷. 1.1缓存的优点: 避免冗余的数据传输: 当很多的人去访问一个网站的原始服务器 ...
Web缓存机制(浏览器缓存 CDN缓存 DNS缓存)
在本片文章中,将阅读到的内容有: web缓存的类型 1.1数据库数据缓存 1.2 服务器端缓存 1.2.1 代理服务器缓存 1.2.2 CDN缓存 1.2.3 DNS缓存 1.3 浏览器端缓存 1.3 ...
android缓存策略跟cdn,缓存学习（五）CDN缓存（下）-CDN缓存策略、CDN缓存和浏览器缓存之间的关系、回源和回源比...
CDN缓存策略 CDN(Content Delivery network,内容分发网络),通过GSLB技术使得用户能访问到最近物理机房的文件,以节省网络时间,也就是说一份文件可能会在全国乃至全球的多个 ...
php 前端缓存,前端浏览器缓存及代码部署
前言最近手上刚刚拆掉石膏,去楼下房友帮忙.楼下房友领导来自阿里,前端用的是阿里的ant-design,设计将设计图上传到蓝湖,聊天工具也采用阿里的钉钉.有时间我也多多去楼下房友交流学习,多交流,就会 ...
h5离线缓存与浏览器缓存的区别
离线缓存允许我们在没网的时候通过读取离线文件进行站点的访问,而浏览器缓存即使浏览器又对资源文件的缓存也必须在有网的情况下读取缓存文件以提高文件加载速度,没网的时候依然显示网络断开的错误. 转载于:ht ...
前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理
浏览器缓存机制分析及前端缓存清理发布时间:2018-06-03 16:56, 浏览次数:857 本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面 ...

http缓存和浏览器缓存

http缓存和浏览器缓存相关推荐

最新文章

热门文章