概述浏览器缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理，是开发web应用的基础，本文着眼于此。基本认知浏览器缓存分为强缓存和协商缓存：浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强
转载
2024-03-05 12:39:40
79阅读
HTTP缓存机制HTTP的缓存机制分为两种，一种是强缓存一种是协商缓存。主要作用是加快资源的获取速度，提升用户体验，减少网络传输，缓解服务器端的压力。强缓存：不需要发送请求到服务器端，直接读取浏览器本地资源。在Chrome的network中显示的HTTP状态码是200，在Chrome中，强缓存又分为Disk Cache（存放在硬盘中）和Memory Cache （存放在内存中），存放的位置是浏览器
转载
2023-11-09 11:49:30
129阅读
# 理解 Axios 强缓存
随着互联网的发展，前端应用程序越来越依赖于快速和高效的数据请求。在这个过程中，HTTP 缓存机制的使用变得尤为重要。在众多的库中，Axios 是一个非常流行的 HTTP 客户端库，能够帮助我们更好地处理 HTTP 请求和响应。本文将聚焦于 Axios 的强缓存特性，并通过实例详细说明其应用场景和优势。
## 什么是强缓存？
在 HTTP 协议中，缓存机制分为强缓
在现代前端开发中，`axios`作为一款流行的HTTP客户端库，被广泛应用于数据请求。然而，随着业务量的逐渐增大，“axios强缓存”问题愈发凸显，导致客户端在应用更新后依旧请求旧数据，影响用户体验和数据的实时性。这篇博文将详细记录我的思考与解决过程，涉及到背景分析、演进历程、架构设计、性能攻坚、故障复盘等多个方面。
在这个背景下，假设我们的业务具有以下特征：
- 日均用户访问量达到$N$。
-
强缓存与协商缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的资源进行存储，当访问者再次访问同一资源时，浏览器就可以直接从本地磁盘加载资源，通过缓存的方式就可以减少与服务器的数据传输，减少服务器的负担，加快页面响应速度等。 描述 良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度，通常浏览
原创
2022-05-27 23:54:54
452阅读
一. web缓存描述 ：Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这 个文档。二. 浏览器缓存：浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档三. 缓存的优缺点：优点：1.减少
转载
2024-05-21 18:52:19
60阅读
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存
原创
2021-04-17 22:35:59
197阅读
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来
原创
2022-03-30 14:10:55
69阅读
在工作中，前端代码打包之后的生成的静态资源就要发布到静态服务器上，这时候就要做对这些静态资源做一些运维配置，其中，gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。 缓存的优点： 减少了不必要的数据传输，节省带宽 减少服务器的负担，提升网站性能 加快了客户端加载网页的速度 用 ...
转载
2021-09-09 15:21:00
200阅读
2评论
expires time; 控制http的expire 和 cache-control； 如果time是负数，那么是弱缓存 如果time是整数或者0，则Cache-Control的值为max-age=time; ...
转载
2021-10-31 18:50:00
307阅读
2评论
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回...
转载
2022-03-29 11:25:00
49阅读
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回...
转载
2021-06-30 13:40:57
181阅读
Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。缓存优点：减少不必要的数据传输，节省带宽减少服务器负担，提升网站性能加快客户端加载网页的速度，用户体验友好缓存缺点：服务端资源更新后，客户端更新滞后浏览器缓存主要有两类：强制缓存协商缓存强制缓存不会向服务器发送请求，直接从缓存中读取资源，请求返回状态码为 200 ;强制缓存时，服
HTTP缓存HTTP Cache是我们开发中接触最多的缓存, 它分为强缓存和协商缓存强缓存: 直接从本地副本对比获取, 不去请求服务器, 返回的状态码是200协商缓存: 会去服务器对比, 若没改变才直接读取本地缓存, 返回的状态码是304(一)、强缓存强缓存主要包括expires和cache-control
转载
2022-03-25 14:41:12
10000+阅读
1. 问题-背景以前也经常用nginx，但用的不深，通常是简单的设置个location用来做反向代理。直到今天给客户做项目碰到缓存问题：客户有个app，只是用原生做了个壳，里面的内容都是用h5写的，我们半途接手将新版本静态资源部署到服务器上后，发现手机端一直显示老的页面，一抓包，发现手机端根本就没有去请求新的html页面，定位是缓存问题。2. 配置乍一看，客户原来的配置好像没什么问题，该有的也全有
转载
2024-02-18 17:26:41
293阅读
目录前言：一、强缓存二、协商缓存前言：强缓存&协商缓存是提高页面加载效率、降低服务器负担的网络层面的性能优化手段之一。通过读取计算机本地缓存的内容加快页面资源加载，降低服务器负担。Cache-Control:在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为： &
刚好我最近也在对这一块的内容做补充和总结，受到这篇优质博文的启发，于是有了这篇博文。 如果强缓存是新鲜的，优先强缓存。 若资源没有更新，状态码为304走浏览器缓存；若为200，走协商缓存，返回更新后的资源。
原创
2022-10-07 22:00:40
260阅读
一、浏览器缓存Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。(一)、缓存优点：减少不必要的数据传输，节省带宽减少服务器负担，提升网站性能加快客户端加载网页的速度，用户体验友好(二)、缓存缺点：服务端资源更新后，客户端更新滞后(三)、浏览器缓存主要有两类：强制缓存协商缓存(四)、强缓存与协商缓存的区别 如图:(五)、缓存机制原
转载
2024-01-21 08:04:05
83阅读
浏览器缓存是前端性能优化的重要手段，主要分为强缓存和协商缓存。1. 缓存整体流程
2. 强缓存强缓存不会向服务器发送请求，直接从缓存中读取资源。2.1 相关 HTTP 头部Cache-Control (HTTP/1.1)Cache-Control: max-age=3600
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control:
1、 强缓存，不向服务器发请求，直接从本地硬盘(from disk cache/from memory cache)或者内存中获取 2、协商缓存，向服务器发出验证，如果资源无更改，不重新返回资源内容，资源内容从本地获取,，需要刷新command+r 3、如果需要从服务器直接获取，需要强制刷新，就是所
转载
2017-08-28 11:11:00
181阅读
2评论
