浏览器缓存机制(二):HTTP缓存

简介: 浏览器缓存机制(二):HTTP缓存

前言

HTTP 缓存是产生于客户端与服务器之间通信的一种缓存,利用这一缓存可以提升服务器资源的重复利用率,在有效的时间内不必每次都向服务器请求相同的资源,大大减少服务器的压力。

HTTP 缓存按照失效策略划分可以分为:

  • 强缓存
  • 协商缓存

网络异常,图片无法展示
|

强缓存

强缓存涉及到两个首部字段名:Expires(实体首部字段) 和 Cache-Control(通用首部字段)。

强缓存的实现过程:

  1. 浏览器首次请求资源,服务器返回响应时,在 Response Headers 中将过期时间(相对于服务器的时间)写入 expires 字段
  2. 浏览器再次请求资源时,浏览器会对比本地时间与expires的时间,如果未过期就直接使用缓存,不再向后端发起请求

由于Expires是一个绝对时间,是一个时间戳,如果服务器和浏览器之间存在时差,那么就会判定失误,因此在HTTP 1.1 引入了Cache-Control字段。该字段有四个值:

max-age

max-age是一个相对时间,是一个时间长度,以客户端请求到此资源的时间为起点,从而规避时间差的问题。

如果同时设置了expirescache-control:max-age=xxx,那么以后者为主,后者优先级更高。

public/private

默认是private,但是public在很多情况下不需要手动设置。

  • public表示代理服务器可以缓存资源
  • private表示只有客户端可以缓存资源,设置了private之后s-maxage会被忽略

s-maxage

s-maxage 就是用于表示 cache 服务器上(比如 cache CDN)的缓存的有效时间的,并只对 public 缓存有效。

no-cache/no-store

  • no-store表示不使用任何缓存策略
  • no-cache表示客户端/代理服务器可以缓存,但是使用缓存前必须问下服务端,也就是走协商缓存

优先级较高的是强缓存,在命中强缓存失败的情况下,才会走协商缓存。

协商缓存

协商缓存一共涉及到四个首部字段名:

  • 实体首部字段Last-Modified
  • 响应首部字段:ETag
  • 两个请求首部字段:If-Modified-SinceIf-Non-Match

协商缓存的实现过程:

  • 浏览器首次发起请求,服务端返回Last-Modified字段
  • 浏览器以后每次发起请求,都会携带If-Modified-Since(值对应服务端返回Last-Modified字段),如果资源无变更,服务端就会返回304 Not Modified,表示重定向到浏览器缓存

为了更准确的感知资源的变化,出现了ETagIf-Non-Match。Etag 是由服务器为每个资源生成的唯一的标识字符串

服务端返回ETag字段,浏览器进行保存,If-Non-Match的值就对应ETag的值。

当 Etag 和 Last-Modified 同时存在时,以 Etag 为准。

chrome三种加载模式与 HTTP 缓存间的关系

Chrome 具备三种加载模式,开启开发者工具时在浏览器 左上角刷新按钮上右键鼠标可以进行操作。

1.正常重新加载

这种就是普通的刷新页面,会去读取缓存

2.硬性重新加载

效果类似于在开发者工具Network面板勾选了Disabled cache选项。使用硬性重新加载后所有资源的请求首部都会被加上cache-control:no-cachepragma: no-cache属性,表示不直接使用缓存,要求向源服务器发起请求, pragma 则是为了兼容 HTTP/1.0。

3.清空缓存并硬性重新加载

这个模式就相当于先清空缓存,再重新向服务器发送请求。同时其影响的并不是当前网站,所有访问过的网站缓存都将被清除。


相关文章
|
2月前
|
存储 缓存 监控
后端开发中的缓存机制:深度解析与最佳实践####
本文深入探讨了后端开发中不可或缺的一环——缓存机制,旨在为读者提供一份详尽的指南,涵盖缓存的基本原理、常见类型(如内存缓存、磁盘缓存、分布式缓存等)、主流技术选型(Redis、Memcached、Ehcache等),以及在实际项目中如何根据业务需求设计并实施高效的缓存策略。不同于常规摘要的概述性质,本摘要直接点明文章将围绕“深度解析”与“最佳实践”两大核心展开,既适合初学者构建基础认知框架,也为有经验的开发者提供优化建议与实战技巧。 ####
|
1月前
|
缓存 Java 数据库连接
MyBatis缓存机制
MyBatis提供两级缓存机制:一级缓存(Local Cache)默认开启,作用范围为SqlSession,重复查询时直接从缓存读取;二级缓存(Second Level Cache)需手动开启,作用于Mapper级别,支持跨SqlSession共享数据,减少数据库访问,提升性能。
32 1
|
1月前
|
缓存 Java 数据库连接
深入探讨:Spring与MyBatis中的连接池与缓存机制
Spring 与 MyBatis 提供了强大的连接池和缓存机制,通过合理配置和使用这些机制,可以显著提升应用的性能和可扩展性。连接池通过复用数据库连接减少了连接创建和销毁的开销,而 MyBatis 的一级缓存和二级缓存则通过缓存查询结果减少了数据库访问次数。在实际应用中,结合具体的业务需求和系统架构,优化连接池和缓存的配置,是提升系统性能的重要手段。
60 4
|
2月前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
110 7
|
2月前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略?
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略,可以在提高网页性能、减少网络流量的同时,确保用户能够获取到最新的内容,从而提升用户体验和网站的性能优化效果。
131 4
|
2月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
3月前
|
存储 缓存 NoSQL
保持HTTP会话状态:缓存策略与实践
保持HTTP会话状态:缓存策略与实践
|
3月前
|
存储 缓存 JSON
vue2知识点:浏览器本地缓存
vue2知识点:浏览器本地缓存
53 2
|
3月前
|
存储 缓存 负载均衡
Nginx代理缓存机制
【10月更文挑战第2天】
114 4
|
3月前
|
存储 缓存 NoSQL
深入理解后端缓存机制的重要性与实践
本文将探讨在后端开发中缓存机制的应用及其重要性。缓存,作为提高系统性能和用户体验的关键技术,对于后端开发来说至关重要。通过减少数据库访问次数和缩短响应时间,缓存可以显著提升应用程序的性能。本文将从缓存的基本概念入手,介绍常见的缓存策略和实现方式,并通过实例展示如何在后端开发中有效应用缓存技术。最后,我们将讨论缓存带来的一些挑战及其解决方案,帮助您在实际项目中更好地利用缓存机制。