浏览器缓存是提高网页加载速度的一种机制,它允许浏览器存储访问过的网页资源的副本,减少重复加载相同资源的次数。浏览器缓存分为两种主要类型:强缓存(也称为HTTP缓存或过期缓存)和协商缓存。
强缓存(HTTP缓存/过期缓存):强缓存是基于HTTP响应头中的Expires或max-age指令。这些指令告诉浏览器资源的有效期,在这个有效期内,浏览器可以直接从本地缓存读取资源,而不需要向服务器发送请求。如果Expires或max-age指令指定的时间已经过去,浏览器将需要重新向服务器请求资源。
协商缓存:协商缓存依赖于ETag(实体标签)或Last-Modified响应头。这些响应头由服务器提供,用于标识资源的特定版本。
当资源的强缓存有效期过去后,浏览器在下次请求该资源时会使用If-None-Match(对应ETag)或If-Modified-Since(对应Last-Modified)请求头,将之前存储的值发送给服务器。
服务器接收到请求后,会比较请求头中的值与当前资源的ETag或Last-Modified值。如果服务器上的资源没有变化,它会返回一个304 Not Modified响应,告诉浏览器可以使用本地缓存的版本。如果资源已经更新,服务器将返回新的资源和更新后的ETag或Last-Modified值。
区别:
缓存机制:强缓存不需要与服务器通信,而协商缓存需要发送请求以验证资源是否已更新。
缓存时间:强缓存基于固定的有效期,而协商缓存基于资源的版本标识。
HTTP响应:强缓存在有效期内不会生成新的HTTP响应,协商缓存可能会生成304 Not Modified响应。
合理配置缓存策略可以显著提高网页的性能,减少服务器的负载,并改善用户的体验。通常,这两种缓存机制会结合使用,以实现更高效的资源加载。网友回复
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流?