HTML5 应用程序缓存 VS 浏览器缓存
即使您熟悉"缓存"一词，但您可能仍未完全理解它在 Web 环境中的含义。日常用语中的"缓存"是指将某些内容存储起来，以备将来使用。大容量存储或主存储无法满足客户端需求，因此需要使用缓存。缓存可以最大限度地减少延迟，加快输入/输出 (I/O) 活动，并减少数据访问时间。
让我们进一步探讨，以更好地理解 HTML5 应用程序缓存与浏览器缓存的区别。
HTML5 应用程序缓存
借助 HTML5 的应用程序缓存 (AppCache)，Web 应用程序无需连接互联网即可缓存并访问。只要客户端处于连接状态，浏览器就可以根据新的 HTML5 规范预取网站的部分或全部资源，例如 HTML 文件、图片、CSS、JavaScript 等。
用户无需事先查看过此内容即可获取。换句话说，那些从未访问过且在标准浏览器缓存中不可用的网站可以通过应用程序缓存进行预取。虽然最初下载这些内容显然会浪费带宽，但预取文件可以加快网站的性能。
应用程序缓存的用途
离线浏览 − 用户可以在离线状态下随时访问网站。
速度 − 当数据已存储时，可以轻松快速地访问;缓存资源比未缓存资源加载速度更快。
减少服务器负载 − 浏览器只会从服务器下载最新更新的资源。
示例
在下面的示例中，我们将创建一个带有应用程序缓存的简单网页。
<!DOCTYPE html>
<html manifest="tutorial.appcache">
<body>
Welcome to Tutorialspoint.
<p>
click to open <a href="https://www.cainiaomax.com/index.htm"> the page</a>,
then go offline, and reload the page. The content
should still work.
</p>
</body>
</html>
输出
脚本执行时，会生成一个包含链接的输出，该链接即主文件。当您尝试打开链接的页面时，将运行下一个页面。之后，即使您离线并重新加载页面，页面内容仍保持不变。
浏览器缓存
通过保存经常查看的页面副本，并在您返回时使用该副本呈现页面，Web 浏览器使用缓存来存储 HTML 网页。如果页面上的日期与先前存储的副本上的日期相符，计算机就会使用您硬盘上的副本，而不是从互联网上重新下载。
当您访问网站时，浏览器会复制页面的某些部分并将其保存到您计算机的硬盘上。您的浏览器还会保存以下部分内容:
图片 - 徽标、图片、背景等
HTML
CSS
JavaScript
简而言之，"静态资源"是指网站中每次访问后都不会发生变化的部分，通常会被浏览器缓存。浏览器缓存的优势远大于其劣势。您只需要良好的防火墙、病毒扫描程序和常识，即可确保计算机安全。
区别
虽然 AppCache 在用户在线时提供与典型浏览器缓存相同的速度优势，但它是专门为使网站能够离线访问而设计的。
它与浏览器缓存的主要区别在于，浏览器缓存仅保存您实际访问过的页面和相关资源，而您可以在清单文件中定义浏览器应缓存的所有资源(可能是您的整个网站)。
