如何理解url输入后的整个流程(4)-http缓存/浏览器缓存？

技术指南：url输入后的整个流程(4)-http缓存/浏览器缓存

前言

在上一篇文章中，我们讨论了url输入后的整个流程中的第三步-DNS解析。在本篇文章中，我们将继续讨论url输入后的整个流程中的第四步-http缓存和浏览器缓存。

一、缓存策略

当客户端第一次请求数据时，此时浏览器不存在缓存数据，需要向服务器请求资源，服务器在返回资源的同时返回缓存策略，http状态码为200，缓存策略存在于响应头里，缓存策略主要有强制缓存和协商(对比)缓存。

对于强制缓存，服务器响应头会有2个字段：

• Cache-Control：no-cache, no-store, max-age=xxx, must-revalidate
• Expires：配合max-age字段，规定缓存到期时间

强制缓存只要满足缓存策略就可以直接使用缓存，不和服务器进行通信，其中max-age是控制缓存的最长时间，如果max-age值很小，那么缓存有效期就很短，容易造成回源。

协商缓存与强制缓存不同，它每次都会和服务器通信，根据响应头来决定是否使用缓存，如果协商缓存命中，服务器会返回304状态码，如果协商缓存没有命中，服务器会返回200状态码，并返回新的数据。

协商缓存有2个字段：

• Etag：实体标识，用于判断资源是否有变化，一般配合If-None-Match使用
• Last-Modified：资源的最后修改时间，用于判断资源是否有变化，一般配合If-Modified-Since使用

二、强制缓存

强制缓存是浏览器根据服务器发送的缓存策略，决定是否使用缓存，如果满足缓存策略，则直接使用缓存，不与服务器进行通信。

强制缓存有2种情况：

• 浏览器有缓存数据，并且缓存策略满足当前请求，则直接使用缓存数据
• 浏览器没有缓存数据，或者缓存数据不满足当前请求，则向服务器发送请求，服务器在返回资源的同时返回缓存策略，如果缓存策略满足当前请求，则浏览器将资源缓存起来，并直接使用缓存数据

三、协商缓存

协商缓存是浏览器每次都会向服务器发送请求，服务器根据响应头来决定是否使用缓存。

协商缓存有2种情况：

• 服务器返回304状态码，说明协商缓存命中，浏览器直接使用缓存数据
• 服务器返回200状态码，说明协商缓存没有命中，浏览器将新的资源缓存起来，并使用新的资源数据

四、Etag和Last-Modified

Etag和Last-Modified都是用于判断资源是否有变化的字段。

• Etag：实体标识，是一个唯一的字符串，由服务器生成，当资源发生变化时，Etag也会发生变化。
• Last-Modified：资源的最后修改时间，是一个时间戳，当资源发生变化时，Last-Modified也会发生变化。

浏览器在发送请求时，会将Etag或Last-Modified字段的值发送给服务器，服务器根据这些字段的值来判断资源是否有变化。如果资源没有变化，则服务器返回304状态码，浏览器直接使用缓存数据；如果资源有变化，则服务器返回200状态码，并返回新的资源数据。

五、结语

http缓存和浏览器缓存可以有效提高网站性能，减少服务器压力。在实际开发中，我们可以根据需要选择合适的缓存策略。