http --- 前端的缓存

前端的缓存分为: http缓存和浏览器缓存
http缓存:

// 当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要请求资源"的副本
// 就会从浏览器缓存中提取而不是从原始服务器中提取这个资源// 常见的http缓存,只能缓存get请求响应的资源,对于其他类型的响应则无能为力,所以后续说的请求缓存都是指GET请求// http缓存都是从第二次请求开始的.第一次请求资源时,服务器返回资源,并在response header头中回传资源的缓存参数
// 第二次请求时,浏览器判断这些请求参数,命中强缓存就直接200,否则就把请求参数加到request header头中传给服务器
// 看是否命中协商缓存,命中则返回304,否则服务器会返回新的资源// 注1:强制缓存如果生效,会返回状态码200,且不需要和服务器进行交互
//     协商缓存无论是否生效,会返回状态码304,都需要和服务器进行交互// 注2:强制缓存是否失效(根据Cache-Control的max-age有没有超时,或expires的缓存有没有过期判断)// 协商缓存:
// 当第一请求时服务器返回的响应头中没有Cache-Control和Expire或者Cache-Control和Expires过期
// 亦或者它的属性设置为no-cache,那么浏览器第二次请求时,就会与服务器进行协商
// 与服务器端对比判断资源是否进行了修改更新.如果服务器端的资源没有修改,那么就会返回304状态码
// 告诉浏览器可以使用缓存中的数据,这样就减少了服务器的数据传输压力.// 注3:私有缓存(浏览器缓存):Cache-Control: Private
// 注4:共享缓存(代理级缓存):Cache-Control: Public

为什么使用http缓存:

// 1.减少冗余的数据传输,节省流量
// 2.缓解服务器的压力,提高服务器的性能
// 3.加快了页面加载的速度

浏览器缓存:

// 常见的有3种:cookie,sessionStorage和localSotrage
// cookie:兼容各种浏览器,每次都会和后台交互,可设置过期时间
// sessionStorage:不兼容低版本浏览器,本地存储,不会每次和后台交互,会话关闭,缓存失效
// localStorage:不兼容低版本浏览器,本地缓存,不会每次和后台交互,需要手动删除

总结:

1.强制缓存:服务器会告诉浏览器一个过期时间,在规定时间内,无需告知服务器,直接使用缓存,过期则使用协商缓存
2.将缓存中的Etag和Last-Modified通过请求告诉服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存

参考 https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247484343&idx=1&sn=efb2f0eacc32e24ca2dd8bed0900f85e&chksm=fa2be35ecd5c6a48246107307ea838c42e807fb6ddf4838228ef552a387e0a02f0c64f1a4606&mpshare=1&scene=23&srcid=#rd

http --- 前端的缓存相关推荐

php 微信怎么清除缓存,前端清除缓存方法（微信缓存引起的bug）
bug1:在新版微信中,部门安卓机子(华为)出现window.location.href/window.location.reload....等方法来刷新本页面链接,发现页面没有被刷新,经过排查,发现 ...
【前端页面缓存技术方案】
前端页面缓存技术方案关于页面缓存数据的纯前端技术方案背景项目存在的现有方案思考
超实用的前端强缓存与协商缓存
超实用的前端强缓存与协商缓存一.区别强缓存: 缓存后完全不向服务器发起任何请求,只在缓存时间过期后才对服务器发起请求, 响应码为 200 (from memory cache),即从内存中进行加载 ...
React 前端 Nginx 缓存配置
React 前端 Nginx 缓存配置最新开发钉钉微应用,上线后发现 2 个问题: 1.每次更新后,需要用户手动刷新获取最新的 HTML 和最新的 js,经常被客户吐槽为什么 bug 还没改,其实早 ...
前端协商缓存强缓存如何使用_前端强缓存和协商缓存
缓存是前端面试的一个常见知识点,下面对于实际项目中如何进行缓存的设置给出方案. 强缓存和协商缓存浏览器缓存是浏览器将用户请求过的静态资源存储到电脑本地磁盘中,当再次访问时,就可以直接从本地缓存中加载 ...
squid反向代理作为web前端内容缓存器及局域网内客户机通过代理服务器上网
反向代理服务器有两种传输模式: 1.同步模式:(如:squid)用户发起请求,请求立即被转到后端的服务器,于是在浏览器和后端服务器之间就建立了一个连接,在请求完成前这个连接是一直存在的. 2.异步模式 ...
前端本地缓存知识：indexDB、localStorage、sessionStorage
前端缓存在实习的时候接触过一个需求是,要求用户在离线状态下也能打开客户端查看部分数据,并对数据进行操作,在联网后向服务器同步操作更新服务器的数据.因此在对前端如何实现在本地存储数据及读写进行调研,了 ...
php 前端缓存,前端浏览器缓存及代码部署
前言最近手上刚刚拆掉石膏,去楼下房友帮忙.楼下房友领导来自阿里,前端用的是阿里的ant-design,设计将设计图上传到蓝湖,聊天工具也采用阿里的钉钉.有时间我也多多去楼下房友交流学习,多交流,就会 ...
前端协商缓存强缓存如何使用_强制缓存和协商缓存有什么区别
1.背景介绍做前端有两个比较令人头痛的事,一个是命名,另一个就是缓存了.HTTP协议提供了非常强大的缓存机制, 了解这些缓存机制,对提高网站的性能非常有帮助. 2.知识剖析什么是浏览器缓存浏览器 ...

http --- 前端的缓存

http --- 前端的缓存相关推荐

最新文章

热门文章