HTTP网络缓存代码实例

HTTP网络缓存是一种提高网页加载速度和降低服务器压力的技术，它通过存储之前请求过的资源副本，在后续请求相同资源时直接从本地复用，避免了重复的网络传输。本专题将深入探讨HTTP网络缓存的不同机制，并通过代码实例来具体演示其工作原理。 一、HTTP缓存的基本概念 HTTP缓存分为两种主要类型：浏览器缓存和代理服务器缓存。浏览器缓存位于用户本地，主要用于存储用户访问过的网页资源；代理服务器缓存则在服务器端，用于服务大量用户，减少对源服务器的压力。 二、HTTP缓存的工作原理 1. **强缓存**：当浏览器请求资源时，首先会检查该资源在本地缓存中的状态。如果资源的`Cache-Control`或`Expires`头部指示该资源仍未过期，浏览器将直接从缓存中获取，无需向服务器发送请求。 2. **协商缓存**：当强缓存未命中时，浏览器会向服务器发送一个带有`If-Modified-Since`或`If-None-Match`头部的请求，询问服务器资源是否已更新。如果服务器返回304 Not Modified状态码，表示资源未变，浏览器继续使用本地缓存；否则，服务器会返回新资源。 三、HTTP缓存控制头详解 - `Cache-Control`: 这个头部提供了更精细的缓存控制，可以设置`max-age`来指定资源的有效时间，或者设置`no-cache`禁止强缓存，`must-revalidate`要求每次请求都与服务器确认。 - `Expires`: 是一个相对时间的头部，指示资源的过期时间。但因为它是服务器发出的，可能存在时间同步问题，所以现代浏览器更倾向于使用`Cache-Control`。 - `ETag` 和 `If-None-Match`: ETag是服务器为每个资源分配的一个唯一标识，用于协商缓存。浏览器在请求时附带上次返回的ETag，服务器比较后决定是否返回新资源。 四、代码实例 在实际开发中，我们可以通过设置HTTP响应头来控制缓存行为。例如，服务器端代码可以设置`Cache-Control`和`ETag`： ```javascript res.setHeader('Cache-Control', 'max-age=3600'); res.setHeader('ETag', 'W/"123456789"'); ``` 客户端代码可以检查缓存并处理请求： ```javascript const cachedResponse = localStorage.getItem('resource_key'); if (cachedResponse) { const etag = cachedResponse.etag; fetchResourceWithETag(etag); } else { fetchFreshResource(); } function fetchResourceWithETag(etag) { fetch(url, { headers: { 'If-None-Match': etag } }) .then(res => { if (res.status === 304) return cachedResponse.data; return res.json().then(data => { localStorage.setItem('resource_key', { data, etag: res.headers.get('ETag') }); return data; }); }); } ``` 五、缓存优化策略 - 对于不常变化的静态资源（如图片、CSS、JavaScript），设置较长的`max-age`。 - 使用版本号或时间戳作为动态资源的URL一部分，使每次更新时URL改变，强制浏览器重新请求。 - 避免缓存敏感信息，如登录状态、个性化数据等。 通过理解HTTP网络缓存的工作原理和控制机制，开发者可以有效地提升应用性能，优化用户体验。同时，结合代码实践，可以更好地在项目中实现高效的数据缓存。