type
status
date
slug
summary
tags
category
icon
password
📝 介绍
浏览器的缓存机制是一种将网页资源（例如HTML、CSS、JavaScript文件、图像等）临时存储在本地的方式，以便在用户再次访问同一网页时能够更快地加载和呈现页面内容。它的原理是将先前访问过的资源保存在本地缓存中，以便在后续访问中无需再次从网络服务器上请求相同的资源，而是直接从本地缓存中加载。
浏览器缓存的作用主要包括：
- 提高页面加载速度：通过从本地缓存中加载资源，可以减少网络请求次数，加快页面加载速度，提升用户体验。
- 减轻服务器负载：由于重复请求的资源可以直接从本地缓存加载，因此可以减少对服务器的请求，降低服务器负载。
- 减少网络流量：缓存机制可以减少需要通过网络传输的数据量，从而减少用户的网络流量消耗。
- 提高离线访问能力：一些资源被缓存后，用户在没有网络连接的情况下仍然可以访问它们，从而提高了网页的离线访问能力。
缓存机制主要在以下场景下应用：
- 重复访问相同页面：当用户多次访问同一网页时，浏览器会将页面的静态资源缓存起来，以提高后续访问的加载速度。
- 网页开发调试：在网页开发过程中，开发者可以利用浏览器的缓存机制来避免重复加载已经调试通过的资源，加快开发速度。
- 移动端应用：许多移动应用采用基于Web的技术开发，这些应用可以利用浏览器的缓存机制来提高页面加载速度和降低网络流量消耗。
虽然浏览器缓存机制能够提高性能和用户体验，但有时也会导致一些问题，例如缓存过期、缓存冲突等，因此在开发和维护网站时，需要合理管理缓存并进行必要的缓存控制。
浏览器缓存执行步骤
- 浏览器首先发送http请求
- 浏览器优先从缓存中查找是否有缓存结果并且判断缓存结果是否失效
- 如果有缓存结果并且缓存结果没有失效直接使用缓存
- 如果有缓存结果但是缓存结果失效浏览器缓存就会返回给浏览器缓存标识
- 浏览器携带该缓存标识发送http请求
- 服务器会检查该资源是否更新（协商缓存）（Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高）
- 如果没有更新，直接返回304，浏览器会再想浏览器缓存获取缓存结果
- 如果资源更新，返回200，浏览器获取到资源后将请求结果和缓存标识存入到浏览器缓存中
- 资源获取结束
📎 相关文章
- Author:GDYG
- URL:https://gdyg5.top/article/browser-cache
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts