浏览器缓存

使用场景

- 强缓存适用于不经常变动的静态资源，图片、css、js 等文件。这些资源变更频率低，可以设置较长的缓存时间，以提高加载速度减少服务器压力。

- 协商缓存适用于可能被频繁更新的资源，主要通过 if-none-match 也就是 etag 或者 if-modified-since 来判断是否需要修改

强缓存

> 不会向服务器发送请求，直接从缓存中读取资源。前后端均可以设置一般对应 css、js、img 这种不经常变的资源直接设置即可。协商缓存主要是后端设置，他们会把 Last-Modified-sinec 放到请求头里与之前接受的 last-modified 进行比较。亦或者通过 etag 进行比较

- Expires: 绝对时间，浏览器会根据此时间判断是否命中强缓存

- Cache-Control: 相对时间，max-age=3600，浏览器会根据此时间判断是否命中强缓存

协商缓存

> 向服务器发送请求，服务器根据请求头中的相关字段判断是否命中协商缓存

- Last-Modified: 资源在服务器最后被修改的时间

- If-Modified-Since: 客户端发送请求时，会将此值发送给服务器，询问服务器在该时间后资源是否有被修改过

从输入 URL 到页面展示，这中间发生了什么

- 浏览器进程检查 url，组装协议，构成完整的 url。

- 网络进程接收到 url 请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程。

- 如果没有，网络进程向 web 服务器发起 http 请求（网络请求），请求流程如下：

- DNS 解析：将域名解析成 IP 地址

- TCP 连接：建立 TCP 连接

- 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求

- 服务器处理请求并返回 HTTP 响应：服务器接收到请求后，处理请求并返回 HTTP 响应

- 断开 TCP 连接：浏览器接收到服务器返回的 HTTP 响应后，断开 TCP 连接。

- 浏览器进程接收到网络进程返回的 HTTP 响应后，会根据响应头中的内容类型（Content-Type）来决定如何处理响应数据。

- 如果是 HTML 文档，浏览器会继续处理 HTML 文档，将其解析成 DOM 树。

- 如果是 CSS 文档，浏览器会将其解析成 CSSOM 树。

- 如果是 JavaScript 文档，浏览器会执行 JavaScript 代码。