前端百题斩【035】——一文了解HTTP缓存

简介: 前端百题斩【035】——一文了解HTTP缓存

缓存是指代理服务器或客户端本地磁盘内保存的资源副本,利用缓存可减少对源服务器的访问,节省通信流量和通信时间。


浏览器缓存指的就是浏览器对之前请求过的文件进行缓存,以便在下一次访问时重复使用,从而节省带宽、提升访问速度、降低服务器压力。

今天所说的HTTP缓存机制就是利用HTTP响应头将所请求的资源在浏览器中进行缓存,缓存方式主要分为两种:强缓存、协商缓存。


3.1 强缓存



强缓存指的是在缓存时间内不会向服务器发起请求,只有过期之后才会向服务器发起请求,整个流程如下所示:

640.png


HTTP中存在两个响应头来表征强缓存,分别是:Expires、Cache-Control,下面对这两个字段进行阐述。


3.1.1 Expires


Expires是HTTP1.0中的字段,是一个绝对时间,即服务器时间。浏览器检查当前时间,如果还没到失效时间就直接使用缓存文件。


3.1.2 Cache-Control


由于Expires存在服务器时间越客户端时间不一致的问题,所以HTTP1.1中新增了Cache-Control字段(注意:如果同时存在cache-control和expires时,浏览器总是优先使用cache-control),通过设置max-age来不存一个相对时间,表示其在该相对时间内容有效。对于Cache-Control字段的常见取值如下所示:


  1. private:默认值,表示客户端可以缓存,中间代理、CDN等不能缓存此响应;
  2. public:表示客户端和代理服务器都可缓存;
  3. max-age=xxx:缓存的内容将在xxx秒后失效;
  4. no-cache:需要使用协商缓存来验证缓存数据;
  5. no-store:所有内容都不会缓存(包括协商缓存),每次都向服务器请求最新资源;
  6. must-revalidate:在缓存过期前可以使用,过期后必须向服务器验证。


3.1.3 为什么增加Cache-Control字段?


Expires字段存在一个问题,即该字段利用的是绝对时间,由于服务器时间与客户端时间可能不一致,从而导致问题,所以新增了Cache-Control字段。


3.2 协商缓存



协商缓存都会向服务器发送请求,判断缓存数据是否过期,过期的话会返回新的内容,没有过期则使用本地的缓存数据。对于协商缓存主要利用两个字段:Last-Modify、Etag,其整体流程如下所示:


640.jpg



3.2.1 Last-Modify


last-modified是HTTP1.0中的字段,是第一次请求资源时,服务器返回的字段,表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较,如果不一致则认为缓存已过期并返回新资源给浏览器;如果时间一致则发送304状态码,让浏览器继续使用缓存。


3.2.2 Etag


Etag是HTTP1.1中新增的字段,是资源的实体标识(哈希字符串),当资源内容更新时,Etag会改变。服务器会判断Etag是否发生变化,如果变化则返回新资源,否则返回304。

3.2.3 为什么增加Etag字段?


在Last-Modify字段存在情况下又新增Etag字段的理由主要有以下几点:


  1. 一些文件进行更改后,其内容并没有发生变化,仅仅影响了修改时间,这时候不应该认为缓存过期了;
  2. 某些文件修改太多频繁(秒级别以内),但是If-Modify-Since能检查的精度是秒级别,此时会导致问题;
  3. 某些服务器并不能精确得到文件的最后修改时间。
相关文章
|
2月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
68 3
|
5月前
|
缓存 JSON 前端开发
超详细讲解:http强缓存和协商缓存
超详细讲解:http强缓存和协商缓存
|
2月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
42 3
|
3月前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
132 2
|
3月前
|
存储 缓存 NoSQL
保持HTTP会话状态:缓存策略与实践
保持HTTP会话状态:缓存策略与实践
|
3月前
|
存储 缓存 监控
HTTP:强缓存优化实践
HTTP强缓存是提升网站性能的关键技术之一。通过精心设计缓存策略,不仅可以显著减少网络延迟,还能降低服务器负载,提升用户体验。实施上述最佳实践,结合持续的监控与调整,能够确保缓存机制高效且稳定地服务于网站性能优化目标。
58 3
|
3月前
|
存储 前端开发 NoSQL
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
|
3月前
|
缓存 前端开发 安全
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
207 0
|
5月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
168 1
|
5月前
|
缓存 JavaScript 前端开发
【性能革命!】Vue 3事件监听缓存的奥秘 —— 揭开前端优化的神秘面纱,让应用性能飙升的秘密武器!
【8月更文挑战第7天】随着前端应用日益复杂,性能优化变得至关重要。Vue 3 通过引入事件监听缓存等新特性提升了应用性能。此特性避免了重复注册相同的事件监听器,减少了资源浪费和潜在的内存泄漏问题。在 Vue 3 中,事件监听器首次渲染时注册,并在后续渲染中重用,除非组件状态变更或手动更新。通过一个示例组件展示了如何利用该特性优化性能,包括使用 `watchEffect` 或 `watch` 在状态变化时重新注册监听器。这一机制降低了浏览器负担,减少了内存占用,提高了应用响应速度,尤其对大型应用效果显著。合理运用事件监听缓存能够构建出更加流畅的应用体验。
335 3