浏览器缓存常识

最新推荐文章于 2024-07-24 22:35:35 发布

小生测试

最新推荐文章于 2024-07-24 22:35:35 发布

阅读量1.1k

点赞数 3

分类专栏：测试文章标签：浏览器缓存

本文链接：https://blog.csdn.net/LANNY8588/article/details/85054338

版权

测试专栏收录该内容

18 篇文章 3 订阅

订阅专栏

缓存系统之浏览器缓存

缓存的分类：

客户端：
浏览器缓存，目的就是加速各种静态资源的访问。对于静态资源来说，浏览器不会缓存html页面的，所以你每次改完html的页面的时候，html都是改完立即生效的，不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有图片，css和js。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容
服务端：
又分为代理服务器缓存和反向代理服务器缓存（也叫网关缓存，比如 Nginx反向代理、Squid等），其实广泛使用的 CDN 也是一种服务端缓存，目的都是让用户的请求走”捷径“，并且都是缓存图片、文件等静态资源

浏览器缓存：

测试知道了解后有什么好处：前端展示不是最新的页面，可以自己分析判断，而不需要每次傻傻的去清理缓存。

浏览器缓存的目的：
第一：避免了频繁请求，节省带宽流量。
第二：加快了用户访问网页的速度。
第三：减小了服务端的压力。
浏览器缓存流程：
在这里插入图片描述

1.查看缓存

判断是否有缓存：
首先先要理解怎么存放存放在哪里：
chrome的浏览器（旧版）：
chrome://chrome-urls/ 谷歌浏览器输入，点击cache链接就可
在这里插入图片描述
火狐浏览器 about:cache?storage=disk

本地chrome的浏览器缓存存放地方一般实在这里：
C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Cache
如下图：
在这里插入图片描述
这样的话不容易看懂，安装下专业的工具Chrome cache View工具：

2.缓存判断

根据上面的流程图看，首先是判断这个缓存是否过期，那怎么去判断
一般情况下，浏览器发出的所有 HTTP 请求会首先被路由到浏览器的缓存。

A.缓存未过期，直接读取数据

以百度的为例：
打开百度，筛选bd_logo,如下图，第一次请求的时候是大部分是200返回码，因为是没有缓存
在这里插入图片描述

在这里插入图片描述
再次刷新，返回200，显示读取的是缓存：

问题：为什么是200。
浏览器中判断是否过期一般由expires以及cache-control字段来判断，如果两者同时存在，则是cache-control max-age覆盖expire。
从以上可以看出，max-age=315360000，cache-control的时间为十年，所以，如果有缓存，这条信息会一直从缓存中读取。

B缓存过期：

打开新浪网为例，
输入goldenstock.js
可以看出有效期是2分钟，前两分钟都是返回200
在这里插入图片描述

超过两分钟后，重新刷新，如下图，304了。
请在这里输入图片描述
问题：为什么是304.
根据上面的流程，
先看缓存是否过期，缓存数据是存两分钟，两分钟过后，缓存失效，查看eatg标记，没有的话，找last-modify(表明请求的资源上次的修改时间)，请求的时候加上if-modif-since(客户端保留的资源上次的修改时间) .通过对比时间，如果是一致的话，就返回304，读取本地缓存，如果不一致，返回200，重新读取
last-modify：
请在这里输入图片描述
if-modif-since

2.1.
打开新浪网为例，
输入11.js。
同理以上，结合流程，含有etag资源的内容标识。（不唯一，通常为文件的md5或者一段hash值，只要保证写入和验证时的方法一致即可），可以看出有效期是2分钟，前两分钟都是返回200
请在这里输入图片描述
etag：

请在这里输入图片描述
If-None-Match：客户端保留的资源内容标识

再次请求的时候，通过比对两者的区别，如果没有区别则返回304，有则返回200.

通常情况下，如果同时发送 If-None-Match 、If-Modified-Since字段，服务器只要比较etag 的内容即可，当然具体处理方式，看服务器的约定规则。

拓展：
Cache-Control
Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。
简单介绍下Cache-Control的属性设置。
1）max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires
2) s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，
而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.
3) public：响应会被缓存，并且在多用户间共享。默认是public。
4) private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。
5）no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
6）no-store: 绝对禁止缓存。
7）must-revalidate: 如果页面过期，则去服务器进行获取。
以上注意的就是nocache与nostore的区别