前端面经 http缓存机制：强缓存（expires和cache-control）、协商缓存（Etag/If-None-Match和Last-Modified/If-Modified-Since）

最新推荐文章于 2025-02-11 16:24:08 发布
最新推荐文章于 2025-02-11 16:24:08 发布
阅读量3.1k 收藏 10
点赞数 2
分类专栏： 前端面试 文章标签： 缓存 http 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43263320/article/details/114623987
版权

关于强缓存和协商缓存

为什么需要缓存机制

缓存机制的定义： 浏览器在用户的本地磁盘存储了用户最近请求的资源。当用户再次请求同一资源时，浏览器直接从本地磁盘读取资源即可。

  • 减少多余的数据传输
  • 减轻服务器端的负担
  • 加快客户端加载网页的速度，提升用户体验

缓存的过程

第一次缓存

浏览器发送第一次请求时，本地是没有缓存的；
故向服务器发送请求；
服务器响应请求
在这里插入图片描述
图源于网络

注意：在第一次请求后，服务器会返回两个关键标识给客户端

  • Last-Modified：最后的修改时间
  • Etag：唯一标识一个文件

再次请求

在这里插入图片描述
图源于网络

对照上图来看，当浏览器再次发送请求时，有如下步骤：

  • 浏览器请求某一资源时，会先获取该资源的header信息。根据header信息中的expires和cache-control 去判断该资源是否过期。若未过期，是
最低0.47元/天 解锁文章
面经复习-浏览器缓存和304
鲈鱼的博客
09-22 462
参考链接1 参考链接2 一、浏览器缓存 浏览器第一次打开一个网页获取资源后，根据返回的header信息来告诉如何缓存资源。 浏览器第一次请求时： 浏览器后续请求时： 第二次请求服务器返回了一个304。 在第一次请求服务器的时候在获取资源之后是会先把该资源缓存在本地的，同时服务器response返回了一个响应头ETag，ETag全称Entity Tag，用来标识一个资源。在具体的实现中，ETag可以是资源的hash值，也可以是一个内部维护的版本号。但不管怎样，ETag应该能反映出资源内容
前端经典面经--助你金九银十面试无忧
开源世界
09-08 797
HTTP/HTML/浏览器 说一下http 和https 参考回答： https 的 SSL 加密是在传输层实现的。 http://github.crmeb.net/u/defu http 和https 的基本概念 http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务端请求和应答的标准(TCP)，用于从 www 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。 https：是以安全为目标的 http 通道，简单讲是 http 的安全版，即 htt
HTTP头的Expires与Cache-control
dianconglin4832的博客
10-16 629
1.概念 Cache-control用于控制HTTP缓存（在HTTP/1.0中可能部分没实现，仅仅实现了Pragma: no-cache） 数据包中的格式： Cache-Control: cache-directive cache-directive可以为以下： request时用到： | "no-cache" | "no-store" | "max-age" "=" d...
HTTP缓存（Cache-Control、Expires 、ETag）
weixin_34008805的博客
10-16 306
HTTP缓存 HTTP缓存（ ETag、Cache-Control）——谷歌开发者HTTP缓存有利于web性能优化 Cache-Control 例子 假设我们首页有一个请求,请求js文件<script src="./main.js"></script>如何让CSS和JS请求速度加快? 此时打开首页发现这个文件大小为...
前端知识速记：浏览器缓存机制 - 强缓存与协商缓存
最新发布
无限大的博客
02-11 1785
强缓存（也称为本地缓存）和协商缓存（也称为弱缓存）。当浏览器请求资源时，首先检查本地缓存是否命中。如果命中，则直接从缓存中读取资源，无需向服务器发送任何请求。当强缓存未命中时，浏览器会向服务器发送请求，询问服务器资源是否发生变化。如果服务器告知资源未改变，则浏览器从缓存中读取资源；如果服务器告知资源已改变，则浏览器会下载新资源并更新缓存。
http expires cache-control last-modified if-modified-since
积累
05-29 1116
关于 Cache-Control: max-age=秒 和 Expires  Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求）  max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。  如果max-age和同时存在，则被Cache-Control的max-age覆盖。
浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
热门推荐
技术资料库
12-16 6万+
最近在对CDN进行优化，对浏览器缓存深入研究了一下，记录一下，方便后来者 画了一个草图： 每个状态的详细说明如下： 1、Last-Modified 在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(HttpReponse Header)此文件在服务期端最后被修改的时间，格式类似这样：
【HTTP】强缓存&协商缓存
day day up
11-07 370
当我们向服务器请求资源时，服务器认为需要被缓存的资源比如（css，js文件 、图片），这些资源在响应头中都会默认携带 Cache-Control: public, max-age=0。服务器会将请求的资源生成资源标识与发送过来的值进行比对，比如果比对成功则返回 304 状态码，浏览器从本地加载该资源。操作不频繁的文件就会缓存在硬盘中，加载速度也会较慢。长时间不会改变的资源，不仅会浪费宽带，增加服务器的压力，甚至影响到用户的体验。在浏览器向服务器请求资源的时候，许多静态的资源是长时间不会更改的。
「前端996」腾讯-QQ音乐-面试经历（整理）
超逸の学习技术博客
09-02 2081
几个跨域的知识，直接干懵我了...
2021前端面经-看这篇就够了（笔者靠这个拿到阿里和字节的offer）
爱前端也爱恋爱
04-30 2009
面试题梳理 梳理前端常见面试题及答案。 一、web 前端性能优化 性能评级工具（PageSpeed 或 YSlow） css CSS优化、提高性能的方法有哪些 多个css合并，尽量减少HTTP请求 将css文件放在页面最上面 移除空的css规则 避免使用CSS表达式 选择器优化嵌套，尽量避免层级过深 充分利用css继承属性，减少代码量 抽象提取公共样式，减少代码量 属性值为0时，不加单位 属性值为小
关于HTTP缓存
qq_38386617的博客
05-13 415
HTTP 的缓存机制，可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解，争取做到大家读完整篇文章后，对缓存有一个整体的了解。 HTTP 缓存分为 2 种，一种是强缓存，另一种是协商缓存。主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。 强缓存 不需要发送请求到服务端，直接读取浏览器本地缓存，在 Chrome 的 Network 中显示的 HTTP 状态码是 200 ，在 Chrome 中，强缓存又分为 Disk Ca.
HTTP缓存
tscn1的博客
03-22 654
首先，HTTP缓存分为强缓存和协商缓存。 强缓存不需要和服务器沟通，当请求发出时，浏览器会看Expires和Cache-control有没有，有的话命中缓存，返回状态码200，从缓存中获取。 协商缓存会和服务器沟通，看资源有没有没改动。没有改动，返回状态码304，资源会被服务器重定向到浏览器缓存中。 强缓存 与强缓存相关的字段有Expires和Cache-control，由于Expires是http1.0，Cache-control是http1.1的所以Cache-control的优先级高。 Expires
Http缓存
cherrylovedog的博客
06-02 167
web得缓存大致可以分为 数据库缓存，服务器端缓存（cdn缓存，代理服务器），浏览器缓存（localstorage,cookie，sessionstorage,http缓存）； 对于http缓存： http缓存分为两种，协商缓存、强缓存 1.当我们请求一个资源得时候，会先判断http头信息，来判断是否命中强缓存，如果命中强缓存那么就不想服务端发送请求，直接加载缓存中得资源。 2.如果没有命中强缓存，那么就会向服务器发送请求信息，服务器端会判断浏览器得缓存是否失效，如果没有失效，那么服务器就不会返回新的资.
Http缓存总结
liuyij3430448的博客
10-25 342
Cache-Control： 浏览器直接使用本地缓存不发送http请求Expires：览器直接使用本地缓存不发送http请求，蛋可能会因为客户端修改本地时间后导致缓存失效Last-Modified/If-Modified-Since： 浏览器还是会发送网络请求，服务端返回304和空的body，减少了网络传输包的大小。
彻底理解浏览器的缓存机制（http缓存机制）
2401_84091580的博客
04-10 537
那么强制缓存的缓存规则是什么？答：当浏览器向服务器发送请求的时候，服务器会将放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器，，其中Cache-Conctrol的优先级比Expires高。Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
HTTP协议(一) HTTP协议缓存请求头和响应头详解
文若书生的专栏
08-21 6147
文章目录前言一、HTTP协议怎么实现缓存？1、cache-control2、expire3、last-modified4、if-modified-since5、etag6、if-none-match7、Http协议缓存流程图8、java实现缓存协议的代码片段总结 前言 HTTP协议的缓存的目的是减少相应延迟和减少网络带宽消耗， 比如 css、 js、图片这类静态资源应该进行缓存。实际项目 一般使用反向代理服务器（如 nginx、 apache 等） 进行缓存。下面详细解释HTTP协议对缓存的处理支持
Cache-Control 和 Expires 都没有的情况下的缓存
MAIMIHO的博客
11-26 535
如果max-age和expires属性都没有，找找头里的Last-Modified信息。如果有，缓存的寿命就等于头里面Date的值减去Last-Modified的值除> 以10（注：根据rfc2626其实也就是乘以10%） If an origin server does not explicitly specify freshness (e.g. using Cache-Control or Expires header) then a heuristic approach may be us.
http缓存策略以及强缓存和协商缓存浅析
Firstlucky77的博客
05-12 375
本地缓存-强缓存 本地缓存，也就是我们常说的强缓存：是指当浏览器请求资源时，如果请求服务端的资源命中了浏览器本地的缓存资源，那么浏览器就不会发送真正请求给服务器。 此时的请求过程： 第一次请求 当浏览器还是第一次发送请求到后端的时候，本地还没有缓存资源，这个时候的服务器返回给浏览器的资源，响应码是200 当浏览器收到资源后，会将资源和对应的响应头一起缓存下来。 第二次请求 第二次浏览器准备发送请求给服务器时候，浏览器会先检查上一次服务端返回的响应头信息中的Cache-Control(它的值是一个相
浏览器缓存——协商缓存和强制缓存
weixin_41563986的博客
08-01 461
不发请求浏览器在请求静态资源的时候，会根据静态资源的Cache-Control，Expires判断是否超期，如果未超期则无需向服务器发起请求，直接使用缓存的文件强缓存失效才走协商缓存。理由理由就是要用户每次请求index.html不拿浏览器缓存，直接请求服务器，这样就保证资源更新了，用户能马上访问到新资源，如果服务端返回304，这时候再拿浏览器的缓存的index.html。会发送请求，强缓存失效后，浏览器向服务端发起请求静态资源，服务端根据请求头的。缓存过期时间强制缓存。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Silam Lin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值