HTML5缓存
HTML5缓存是一种HTML5技术，允许网站将文件缓存在用户的本地浏览器中，以便在离线状态下仍然可以访问。这种缓存方式可以提高网页的加载速度，并提供更好的用户体验。
如何使用HTML5缓存
在使用HTML5缓存之前，我们需要先创建一个缓存清单文件（通常称为manifest文件），它是一个文本文件，包含了要缓存的文件列表。缓存清单文件的扩展名通常是.appcache。
以下是一个简单的缓存清单文件示例：
CACHE MANIFEST
# version 1.0.0
CACHE:
/index.html
/style.css
/script.js
/logo.png
NETWORK:
*
FALLBACK:
/ offline.html
在上面的示例中，CACHE部分列出了要缓存的文件，包括index.html、style.css、script.js和logo.png。NETWORK部分用于定义需要在线获取的文件，上述示例中使用了通配符*表示所有文件都需要在线获取。FALLBACK部分用于定义离线时的回退页面，如果用户处于离线状态，访问任何无法获得的资源时都会显示offline.html页面。
在HTML文件的<html>标签中，我们需要添加一个manifest属性，指向缓存清单文件的URL。例如：
<!DOCTYPE html>
<html manifest="example.appcache">
<head>
<!-- 页面头部内容 -->
</head>
<body>
<!-- 页面主体内容 -->
</body>
</html>
当用户首次访问包含manifest属性的页面时，浏览器会下载并缓存清单文件中列出的所有资源。之后，当用户再次访问该页面时，浏览器会检查清单文件是否有更新，如果有更新，则会重新下载更新的文件。
缓存事件
HTML5缓存提供了一些事件，可以用于检查缓存状态和更新缓存。
检查缓存状态
我们可以使用window.applicationCache对象来检查缓存状态。下面是一些常用的属性和方法：
status：返回当前的缓存状态，有以下几种取值：0：UNCACHED - 未缓存1：IDLE - 闲置2：CHECKING - 检查中3：DOWNLOADING - 下载中4：UPDATEREADY - 更新就绪5：OBSOLETE - 已过期
onchecking：当浏览器开始检查缓存清单文件时触发的事件。ondownloading：当浏览器开始下载缓存清单文件中列出的资源时触发的事件。onprogress：当缓存清单文件中列出的资源正在下载中时触发的事件。onupdateready：当浏览器检测到缓存清单文件有更新时触发的事件。oncached：当所有资源都已成功缓存时触发的事件。onobsolete：当缓存清单文件已过期时触发的事件。
更新缓存
如果缓存清单文件有更新，可以调用update()方法来更新缓存。更新完成后，会触发onupdateready事件。可以在该事件中调用swapCache()方法来替换旧的缓存。
缓存状态图
下面是一个使用mermaid语法绘制的HTML5缓存状态图：
stateDiagram
[*] --> UNCACHED
UNCACHED --> IDLE
IDLE --> CHECKING
IDLE --> OBSOLETE
IDLE --> DOWNLOADING
CHECKING --> IDLE
CHECKING --> DOWNLOADING
DOWNLOADING --> IDLE
DOWNLOADING --> UPDATEREADY
UPDATEREADY --> IDLE
UPDATEREADY --> OBSOLETE
OBSOLETE --> IDLE
总结
HTML5缓存可以让网站在离线状态下仍然可以访问，提高网页的加载
