问题描述:请求接口,发现拿的还是旧数据,排查了一天,后面和前端发现请求接口只花了1ms,然后发现接口状态为:200 OK(from disk cache);
原因:运维设置nginx缓存接口数据30s,导致先从缓存拿,如果缓存没有,再从接口拿,导致一下有,一下没有;
解决方案:Nginx里面设置add_header ‘Access-Control-Max-Age’ 0;

前端自己解决方案二:

请求的headers里添加三行代码:

headers: {
        'Cache-control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        'Expires': 0
浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。
所以根据上面的特点,浏览器缓存有下面的优点:
  减少冗余的数据传输
  减少服务器负担
  加快客户端加载网页的速度
浏览器缓存是Web性能优化的重要方式。那么浏览器缓存的过程究竟是怎么样的呢?
在浏览器第一次发起请求时,本地无缓存,向web服务器发送请求,服务器起端响应请求,浏览器端缓存。过程如下:
在第一次请求时,服务器将页面最后修改时间通过Last-Modified标识由服务器发送给客户端,客户端记录修改时间;服务器还生成一个Etag,并发送给
                                    6.1-6.2 静态资源CDN引入
用户将静态资源数据请求到ECS服务器,ECS服务器解析到腾讯云的CDN中,CDN可以理解为一个无限大的内容磁盘缓存,本身没有文件存储。当用户访问getItem的一个静态资源文件的时候,根据路由规则查看本地是否有这样的文件,如果有直接返回,没有就回源到源站,回源到下面的OSS中获取静态资源文件。
CDN一边返回对应的文件,一边将文件按照http指示的生命周期缓存起来,以便下次用户访问时,直接返回。
CDN有很多的加速节点,当用户请求CDN的时候,CDN返回一个就近的节点
                                    网站访问速度对一个网站来说是非常重要的,访问慢流失用户,访问快大大的提高用户体验。提升网站访问速度的方式很多,比如这里提升PHP程序运行速度的几个优化方案,但火端今天要介绍的是HTTP缓存,也可以叫浏览器缓存。
浏览器缓存大概有两种,200 OK (from memory/disk cache)和304 Not Modified各有各的优势,把他们发挥好可以大大的提升访问速度。
1、200...
                                    200 OK(from memory cache)内存缓存
不访问服务器,直接从内存中读取缓存。
此时获取的数据是缓存到内存中的,当kill进程后(浏览器关闭),数据将不存在(资源被释放掉了)。
如果再次打开页面时,不出现200 OK(from memory cache)。
内存缓存容量小
快速读取:内存缓存将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取
时效性:缓存时效性很短,随着进程的释放而释放
200 OK(from disk c.
在写前端访问后端接口时候发现,可以访问,但是没有数据,显示请求代码code 为来自磁盘,所以我们需要清理一下磁盘。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200608182523345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg2NzMzMA==,size_1
200 OK 从原始服务器请求成功
200 OK from cache 表示客户端没有请求服务器,直接使用浏览器本地缓存
200 OK from disk cache 不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在
200 OK from memory cache 不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的...
Cache-Control: public, max-age=51600
Connection: keep-alive
Content-Type: text/html; charset=UTF-8
Date: Tue, 05 Feb 2019 14:28:26 ...
使用proxy_cache_path来配置一个cache, 示例
proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m
这里的 cache缓存文件的路径
windows使用相对路径,为nginx安装目录下
mac可以设置自己的路径,如/var/cache/你的目录
levels 表示是否要创建多级文件夹
因为cache目录声明之后用于很多代理服务器
默认所有代理存在于一个目录中导致查找速度变慢
                                    这是博主面向腾讯学习的面试题大整理系列,可以在如下github仓库Issues中通过 Labels 标签分类查看相关内容,同时欢迎大家指正可能的错误并且提出自己的解答,希望大家学的鱼块,春秋招顺利!
传送门:https://github.com/Chocolate1999/Front-end-learning-to-organize-notes
往期精选:
【亡羊补牢】计算机网络灵魂之问 第1期 一道百度笔试题引发的血案 (有了IP地址和子网掩码,广播地址还求不出来?)
【亡羊补牢】计算机网络灵魂之问 第
如果要实现从接口调取数据,则需要单独处理一下。
比如我现在是购物车的下单部分,下单时是可以修改产品的数量的,因此购物车的接口是变的,如果通过本地缓存或者硬盘中读取接口数据,则不能保证数据是否实时,因此需要单独处理一下:
解决步骤有两步:
监听下一个页面的回退,如果监听到回退则本地存储一个缓存,设置为true
	在当前页面获取缓存的数据,如果为true则需要重新调取接口。我这边是点击“购物车”文字时在进行接口的调用,如果页面一加载就需要调