HTTP | 如何缓存 JavaScript、CSS 文件？_浏览器缓存js文件-优快云博客

如何缓存 JavaScript、CSS 文件是一个关注点，因为这能显著提升网站性能、减少服务器负载、节省带宽。简而言之，缓存是指浏览器存储网页资源的一种机制，使得用户在访问同一页面时，无需重新下载相同的资源。特别地，对于JavaScript和CSS文件，一旦缓存，就可以在用户的后续访问中使用本地副本，这样可以加快页面加载速度、改善用户体验。其中，最常用的缓存实现方式包括设置HTTP缓存标头，如Cache-Control和Expires，以及使用服务工作器（Service Workers）。

一、HTTP缓存头的使用

HTTP缓存标头是控制缓存行为的一种方式。通过设置这些标头，服务器可以指示浏览器应如何以及在多长时间内缓存资源。两个关键的缓存标头是Cache-Control和Expires。

Cache-Control和Expires标头

- CACHE-CONTROL

Cache-Control标头可以精细控制缓存策略。它允许服务器指定资源在多久后变得“过时”，或者是否应该永不缓存。例如：Cache-Control: max-age=31536000告诉浏览器资源可以缓存并在接下来的一年内使用。

公共和私有缓存

Cache-Control还可以定义资源是应该被多个用户共享（公共缓存）还是只能由单个用户（私有缓存）缓存。
缓存重新验证

另一种选项是must-revalidate，它强迫浏览器在使用缓存的资源前，先向服务器确认资源是否有更新。

- EXPIRES

Expires标头提供了一个HTTP日期/时间戳，它告诉浏览器在这个时间点之前可以直接使用缓存的资源，不需要再发送请求到服务器。Expires是HTTP/1.0标准的一部分，而Cache-Control是HTTP/1.1引入的，现代浏览器支持这两种标头。

- Expires与Cache-Control的关系

当同时存在时，现代浏览器更倾向于使用Cache-Control标头的指示。

‌在HTTP协议中，Cache-Control的优先级高于Expires。‌ 当HTTP响应头中同时存在Expires和Cache-Control时，Cache-Control的优先级更高，会覆盖Expires的设置‌。

Cache-Control和Expires的区别

‌Expires和Cache-Control都是HTTP协议中用于控制缓存的有效期，但它们在定义和使用上有一些关键区别‌：

1‌、定义和格式‌：

① Expires‌：Expires是一个HTTP响应头，用于指定资源的过期时间，格式为GMT时间。它告诉客户端在什么时间之后不再使用这个缓存资源‌。

② Cache-Control‌：Cache-Control是一个更灵活的缓存控制机制，特别是在HTTP 1.1版本中引入。它通过不同的指令（如max-age）来控制缓存行为，格式为Cache-Control: max-age=<seconds>。Cache-Control不仅可以出现在响应头中，也可以出现在请求头中‌。

2、计算方式‌：

① Expires‌：是一个绝对时间值，表示资源在服务器上的过期时间。如果客户端时间与服务端时间不一致，可能会导致缓存失效‌。