浏览器缓存
浏览器缓存是一种将资源（如图片、CSS 和 JavaScript 文件）保存在本地的技术。这样，当用户再次访问相同的页面时，浏览器可以从本地加载这些资源而不必从服务器重新下载它们，从而提高网站的性能和速度。常见的缓存策略包括强制缓存和协商缓存。
强制缓存
强制缓存是指浏览器直接从缓存中获取资源，并且不会向服务器发送请求。如果缓存未过期，则直接使用缓存的资源。如果缓存已过期，则需要向服务器发送请求并更新缓存。
缓存过期时间
通过设置 HTTP 响应头中的 Expires 或者 Cache-Control 字段，可以控制缓存的过期时间。例如：
Expires: Wed, 21 Oct 2023 07:28:00 GMT
或者：
Cache-Control: max-age=31536000
上面的例子中，Expires 字段指定了缓存的过期时间为 2023 年 10 月 21 日 07 点 28 分；Cache-Control 字段指定了缓存的过期时间为 1 年。
协商缓存
协商缓存是指浏览器向服务器发送请求，但是不会返回完整的资源。相反，服务器会返回一个 HTTP 响应头，其中包含了资源的元数据（如 ETag 和 Last-Modified）。
浏览器会将这些元数据与本地缓存进行比较，如果匹配，则表示本地缓存仍然有效，可以直接使用。否则，浏览器会重新下载资源并更新本地缓存。
ETag
ETag 是一种由服务器生成的唯一标识符，用于表示资源的版本号。当浏览器发起请求时，会将 ETag 值传递给服务器，服务器会将其与当前资源的 ETag 值进行比较。如果两个值相同，则说明资源没有发生变化，可以直接使用本地缓存；否则，需要重新下载资源。
Last-Modified
Last-Modified 是一种日期时间格式，用于表示资源最后修改的时间。当浏览器发起请求时，会将上次修改时间传递给服务器，服务器会将其与当前资源的修改时间进行比较。如果两个时间戳相同，则说明资源没有发生变化，可以直接使用本地缓存；否则，需要重新下载资源。
CacheStorage
CacheStorage 是 Service Worker 中的 API，用于管理缓存。通过 CacheStorage，我们可以轻松地实现离线访问和加速网页加载等功能。
示例代码
以下代码展示了如何使用 CacheStorage 缓存资源：
// 打开一个名为 my-cache 的缓存
caches.open('my-cache').then(function(cache) {
// 将资源添加到缓存中
cache.add('/path/to/my-resource');
});以下代码展示了如何从 CacheStorage 中获取缓存的资源：
-- -------------------- ---- -------
-- --- -------- --------
------------------------------------------------------------ -
-- ---------- -
-- -------
---------------------- ----------
- ---- -
-- -----
---------------------
-
---Web Worker
Web Worker 是 HTML5 中的 API，用于在后台线程中运行 JavaScript。通过 Web Worker，我们可以将一些耗时的操作（如大量计算或网络请求）放入后台线程中运行，以避免阻塞页面渲染。
示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775
