【Web】浏览器缓存（HTTP缓存）

文章目录

一、强制缓存
- 1.1、ExPires
- 1.2、Cache-Control
二、协商缓存
- 2.1、last-modified
- 2.2、etag

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

浏览器缓存包含： HTTP 缓存、indexDB、cookie、localstorage 、sessionStorage
而HTTP缓存有：强制缓存和协商缓存
流程图：
浏览器缓存的优点：

1. 减少了冗余的数据传送，减少带宽
2. 减少了服务器的负担，大大提升了网站的性能
3. 加快了客户端加载网页的速度

一、强制缓存

强制缓存：不会向服务器发送请求，直接从缓存中读取资源

当浏览器向服务器请求数据的时候，服务器会将数据和缓存的规则返回，在响应头的 header 中，有两个字段 Expires和Cache-Control。

1.1、ExPires

Expires 字段的意思是：当前返回数据的缓存到期时间戳。
当浏览器在进行请求的时候，会那浏览器本地的时候和这个时间做对比，判断资源是否过期。
到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。
作为HTTP 1.0的作品，所以它基本可以忽略，在HTTP 1.1 的版本，使用Cache-Control替代

# 设置以秒为单位的绝对过期时间
expires: Mon, 26 Jun 2023 14:00:56 GMT

1.2、Cache-Control

服务器和客户端说，这个资源缓存只可以存在 2592000 秒(2592000 / 3000 / 24 = 30 天)，在这个时间段之内，你就可以在缓存获取资源。
如果 Expire 和 Cache-control 两者同时出现，则以 Cache-control 为主

cache-control: max-age=2592000

常见的设置值

值	描述
no-cache	不会询问浏览器缓存，直接向浏览器发送请求对比过期时间 (协商缓存验证)
no-store	禁止浏览器缓存数据，直接向服务器发送请求获取数据
private(默认值)	只能被终端用户缓存，不允许CDN等中间缓存服务器对齐缓存
public	可以被所有的用户缓存，包括终端用户和CDN等中间代理器
max-age=`<seconds>`	缓存存储的最大周期
max-stale`[=<seconds>]`	客户端愿意接收一个已经过期的资源

二、协商缓存

协商缓存：在使用本地缓存之前，需要向服务器发送请求，可以解决强制缓存的情况下，资源不更新的问题

强制缓存优先级高于协商缓存。也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行协商缓存规则。
如果存在强制缓存的情况下需要使用协商缓存，则设置：

# no-cache 不强制缓存
cache-control: no-cache

需要进行比较判断是否可以使用缓存。响应头中一定有etag或last-modified属性。

2.1、last-modified

服务器第一次响应请求时，告诉浏览器资源的最后修改时间，并存储到浏览器端。
再次请求时，请求头中携带If-Modified-Since字段，将上次请求服务器资源的最后修改时间传到服务器，与被请求资源的最后修改时间进行比对。
若资源的最后修改时间大于If-Modified-Since的值，说明资源又被改动过，则响应整片资源内容，返回状态码200。
若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的缓存数据。

2.2、etag

Last-Modified 存在一个局限性，有以下两种情况：

不该请求，还会请求。编辑了文件，文件内容没有变，但是服务器确认为我们改动了文件，所以重新设置了缓存时间，当做新请求返回给浏览器。
该请求，反而没有请求。修改文件速度很快，快过 If-Modified-Since 字段时间差的检测，文件虽然改动了，但是并没有重新生成新的资源。

由于上述 Last-Modified 字段存在的缺陷，所以在 HTTP / 1.1 新增 etag（标识字符串）我们对资源进行内容编码，只要内容被改变，这个编码就不同。

服务器资源是否被修改的唯一标志。首次请求唯一标志被存到客户端数据库。
同理，再次请求时，请求头中携带If-None-Match字段。与被请求资源的唯一标识进行比对
若不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
若相同，说明资源没有被改动过，则响应HTTP 304，告知浏览器继续使用所保存的缓存数据。

【Web】浏览器缓存（HTTP缓存）相关推荐

不让html缓存图片吗,html – 如何强制Web浏览器不缓存图像
背景我正在为两个无偿网站编写和使用一个非常简单的基于CGI(Perl)的内容管理工具.它为网站管理员提供用于填充字段(日期,地点,标题,描述,链接等)并保存的事件的HTML表单.在该表单上,我允许管 ...
【Web缓存机制系列】2 – Web浏览器的缓存机制
Web缓存的工作原理所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
微信H5、网页、内置Web浏览器清理缓存，微信浏览器缓存
目录一.写在前面: 1.浏览器缓存带来的好处: 2.浏览器缓存带来的弊端: 二.如何清除微信浏览器的缓存: 1.在IOS环境下手动清除微信缓存: 2.在Android环境下手动清除微信缓存: 三.清 ...
Web缓存机制(浏览器缓存 CDN缓存 DNS缓存)
在本片文章中,将阅读到的内容有: web缓存的类型 1.1数据库数据缓存 1.2 服务器端缓存 1.2.1 代理服务器缓存 1.2.2 CDN缓存 1.2.3 DNS缓存 1.3 浏览器端缓存 1.3 ...
前端web：浏览器静态资源缓存策略
浏览器静态资源缓存策略浏览器其实提供了两种控制策略,分别是强制缓存和协商缓存强制缓存强制缓存:就是强制使用浏览器缓存下来的资源; 在指定的一段时间内用自己缓存的文件就行,不需要再次发出请求. 具 ...
说说web缓存-强缓存、协商缓存
网上关于WEB缓存的文章很多,今天汇总一下. 为什么要用缓存一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影 ...
web开发中的缓存问题的研究（一）
web开发中的缓存问题的研究(一) web开发中的缓存问题的研究(二) web开发中的缓存问题的研究(三) 一般情况下,浏览器都会缓存已经访问过的页面内容,关于如何禁止浏览器缓存的介绍,在网上到处都有 ...
透过浏览器看HTTP缓存（转）
作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关的部分,站点没有做任何缓存机制,我们的页面可能会因为资源的下载和渲染变得很慢,但大家都知道去找前端 ...
网络：浏览器静态资源缓存机制
一.前言为什么需要缓存? 缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一 ...
如何不让浏览器读取html缓存,不让浏览器缓存index.html
参考文档:https://www.2cto.com/ask/question/4598 location = /index.html { add_header Cache-Control " ...

【Web】浏览器缓存（HTTP缓存）

文章目录

一、强制缓存

1.1、ExPires

1.2、Cache-Control

二、协商缓存

2.1、last-modified

2.2、etag

【Web】浏览器缓存（HTTP缓存）相关推荐

最新文章

热门文章