跟“缓存”打交道的10分钟：正确理解HTTP缓存

2023-09-20 21:59:32

HTTP 缓存对于许多前端工程师而言，都是又爱又恨的存在。一方面，在必要时它能在不知不觉间加速网页加载，提高用户体验；另一方面，当程序出现逻辑问题导致无法正常运行时，很难通过刷新页面来解决问题。这时，与其点击无数次刷新按钮，不如了解清楚浏览器到底是如何实现缓存功能的，以便能够熟练操控它。因此，本文将用10分钟快速入门HTTP缓存，希望能对您有所帮助。

缓存的定义

缓存（cache）是一种临时存储数据的方式，可以更快地访问数据，降低对服务器的请求。它通常用于存储最近访问过的数据，以便在需要时快速提供。缓存可以是硬件设备，也可以是软件程序。

HTTP 缓存是浏览器中的一项特性，可以帮助提升网站性能。当浏览器访问一个网站时，它会将网站的某些资源（如 HTML、CSS 和 JavaScript 文件）存储在本地。这样，当用户再次访问该网站时，浏览器就可以从本地缓存中加载这些资源，而无需重新从服务器下载。这可以极大地减少服务器的负载，并缩短网页的加载时间。

HTTP 缓存的类型

HTTP 缓存分为两种类型：强缓存和协商缓存。

强缓存：强缓存是指浏览器直接从本地缓存中加载资源，而不会向服务器发送任何请求。这通常发生在资源具有明确的过期时间（Expires）或缓存控制指令（Cache-Control）时。
协商缓存：协商缓存是指浏览器在使用本地缓存之前会向服务器发送一个请求，询问资源是否已被修改。如果资源已被修改，则浏览器会从服务器下载新版本；否则，浏览器会继续使用本地缓存中的资源。这通常发生在资源没有明确的过期时间或缓存控制指令时。

HTTP 缓存的控制指令

HTTP 缓存可以使用以下指令进行控制：

Expires：Expires 指令指定资源的过期时间。当资源的过期时间到来时，浏览器将不再使用本地缓存中的资源，而是重新从服务器下载。
Cache-Control：Cache-Control 指令可以指定资源的缓存行为。它可以指定资源是否可以被缓存、缓存的有效期以及缓存的类型。
Last-Modified：Last-Modified 指令指定资源的最后修改时间。浏览器在使用本地缓存之前会向服务器发送一个请求，询问资源是否已被修改。如果资源已被修改，则浏览器会从服务器下载新版本；否则，浏览器会继续使用本地缓存中的资源。
If-Modified-Since：If-Modified-Since 指令指定资源的上次修改时间。浏览器在使用本地缓存之前会向服务器发送一个请求，询问资源是否已被修改。如果资源已被修改，则浏览器会从服务器下载新版本；否则，浏览器会继续使用本地缓存中的资源。
ETag：ETag 指令指定资源的唯一标识符。浏览器在使用本地缓存之前会向服务器发送一个请求，询问资源是否已被修改。如果资源已被修改，则浏览器会从服务器下载新版本；否则，浏览器会继续使用本地缓存中的资源。
If-None-Match：If-None-Match 指令指定资源的唯一标识符。浏览器在使用本地缓存之前会向服务器发送一个请求，询问资源是否已被修改。如果资源已被修改，则浏览器会从服务器下载新版本；否则，浏览器会继续使用本地缓存中的资源。

HTTP 缓存的应用场景

HTTP 缓存可以用于各种场景，包括：

静态资源缓存：静态资源，如 HTML、CSS 和 JavaScript 文件，通常可以被缓存很长时间。这可以极大地减少服务器的负载，并缩短网页的加载时间。
动态资源缓存：动态资源，如 PHP 和 ASP 文件，也可以被缓存一段时间。这可以减少服务器的处理时间，并提高网站的性能。
API 请求缓存：API 请求也可以被缓存一段时间。这可以减少对服务器的请求次数，并提高 API 的性能。

HTTP 缓存的注意事项

在使用 HTTP 缓存时，需要注意以下几点：

缓存时间：缓存时间应根据资源的类型和更新频率进行设置。缓存时间过短可能会导致浏览器频繁地从服务器下载资源，增加服务器的负载；缓存时间过长可能会导致浏览器使用过时的资源，影响网站的正常运行。
缓存大小：缓存大小应根据浏览器的限制和网站的实际需求进行设置。缓存大小过小可能会导致浏览器无法缓存足够的资源，影响网站的性能；缓存大小过大可能会占用过多的内存，影响浏览器的运行速度。
缓存策略：缓存策略应根据网站的实际情况进行制定。不同的网站可能需要不同的缓存策略。

总结

HTTP 缓存是浏览器中的一项重要特性，可以帮助提升网站性能。合理使用 HTTP 缓存，可以减少服务器的负载，缩短网页的加载时间，并提高用户体验。在使用 HTTP 缓存时，需要注意缓存时间、缓存大小和缓存策略。