引出问题：在做完一个项目迭代上线的时候遇到一个问题：Ht代码部署在nginx里面，当我打包的H5代码上传把之前代码替换掉之后，如果手机端之前有打开过相关的页面，那么在代码上传成功后再次打开，回出现一些js文件404（在PC上也是一样） 分析问题：H5代码使用webpack打包之后会把所有的js文件按照规则命名所以每次代码有改动的话，打出的新包会和老包里面的js文件名称不一样；那么回到开始
转载
2023-11-25 20:48:16
23阅读
一.浏览器的缓存status 为 200Size为 from cache200 from cache: 直接从本地缓存中获取响应,最快速,最省流量, 因为根本没有向服务器发送请求304 Not Modified:协商缓存,浏览器在本地没有生命中的情况下请求头中发送一定的效验数据到服务端,如果服务端数据没有改变浏览器从本地缓存响应,返回304快速,发送的数据很少,只返回一些基本的响应头信息,数据量很
转载
2024-10-28 21:45:31
45阅读
概述浏览器缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理，是开发web应用的基础，本文着眼于此。基本认知浏览器缓存分为强缓存和协商缓存：浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强
转载
2024-03-05 12:39:40
79阅读
HTTP1.0If-Modifed-Since Last-Modifed 304(Not Modified)If-None-Match ETag 304 HTTP1.1Expires 适应本地的过期时间Cache-
转载
2024-01-08 15:57:32
205阅读
血泪史最近在学习强缓存和协商缓存，看了好多文档，千篇一律都说：服务器会根据前端请求头中携带的If-None-Match内容和后端的文档唯一标识Etag作对比，来决定返回304还是200状态码。我就秉承着实事求是的态度，去验证，搭了前后端的代码（后面贴上前后端代码），顺带学习配了跨域处理。结果好家伙！！！确实是有那个先比对强缓存，强缓存过期后再比对协缓存的过程和逻辑，就是浏览器显示的状态码不对，从来
作为一个前端，经常会看到请求，今天稍微了解一下。 以如图所示的请求为例，点击每一部分旁边的 view source 或 view parsed 链接，能够以源格式或者解析格式查看响应标头、请求标头或者查询字符串参数，获取到更多的信息。 我们从中可以获得很多信息，例如http版本，web服务器软件名称等等，这里就不多做追述 详细可以点击 ——> HTTP响应头和请求头信息对照表作为前端，可以修
# 实现协商缓存的流程及代码示例
## 什么是协商缓存？
协商缓存是一种机制，主要用于提高Web应用的性能，避免不必要的服务器请求。当客户端向服务器请求资源时，服务器会根据请求头中的信息决定是否返回缓存的资源，从而节省带宽和加快响应速度。
## 整体流程
下面是实现协商缓存的基本流程，我们将用表格形式展示这些步骤：
| 步骤 | 描述
强制缓存 ： 当我们从浏览器第一次访问一个网站，浏览器就会向服务器发送http请求 服务器会根据我们的请求返回响应的资源， 如果服务器觉得浏览器请求的资源应该是要缓存的，比如css文件js文件 图片文件等等， 服务器会在响应头 response headers中 增加一个cache control ...
转载
2021-08-23 11:06:00
948阅读
2评论
一. web缓存描述 ：Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这 个文档。二. 浏览器缓存：浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档三. 缓存的优缺点：优点：1.减少
转载
2024-05-21 18:52:19
60阅读
客户端检查资源超过有效期、强缓存命中失败的情况下，则发出请求“询问”服务器是否资源真的过期了，询问的同时在请求头要携带着资源的「上次更新时间」或者「唯一实体标识」（不同http版本导致的共存问题）。
原创
2021-11-26 14:45:47
1665阅读
缓存生效的情况下，浏览器会返回304状态
原创
2022-08-27 00:42:04
3261阅读
强缓存与协商缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的资源进行存储，当访问者再次访问同一资源时，浏览器就可以直接从本地磁盘加载资源，通过缓存的方式就可以减少与服务器的数据传输，减少服务器的负担，加快页面响应速度等。 描述 良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度，通常浏览
原创
2022-05-27 23:54:54
452阅读
强缓存如果命中缓存不需要和服务器端发生交互，而协商缓存不管
原创
2023-07-22 08:25:51
228阅读
浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。浏览器使用缓存过程图!在这里插入图片描述(https://s2.51cto.com/images/blog/202208/26220652_6308d37cbf28c95149.png?xossprocess=image/watermark,size_14,text
原创
2022-08-26 22:07:26
196阅读
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存
原创
2021-04-17 22:35:59
197阅读
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来
原创
2022-03-30 14:10:55
69阅读
在工作中，前端代码打包之后的生成的静态资源就要发布到静态服务器上，这时候就要做对这些静态资源做一些运维配置，其中，gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。 缓存的优点： 减少了不必要的数据传输，节省带宽 减少服务器的负担，提升网站性能 加快了客户端加载网页的速度 用 ...
转载
2021-09-09 15:21:00
200阅读
2评论
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回...
转载
2022-03-29 11:25:00
49阅读
强缓存和协商缓存缓存，作为我们开发过程中经常碰到的一样东西，相信很多小伙伴和我一样对它熟悉又陌生，各种 expires 、Etag 好像都知道，却又好像无法把它讲清楚，所以本篇文章就来总结整理下。一、缓存 首先，什么是缓存？我的理解，缓存就是一个资源副本。当我们向服务器请求资源后，会根据情况将资源 copy 一份副本存在本地，以方便下次读取。它与本地存储 localStorage 、cookie
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回...
转载
2021-06-30 13:40:57
181阅读
