HTML5 应用程序缓存与浏览器缓存

尽管熟悉“缓存”这个词，但您可能并不完全理解它在 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://tutorialspoint.com/index.htm"> the page</a>,
         then go offline, and reload the page. The content
         should still work.
      </p>
   </body>
</html>

输出

当脚本执行时，它将生成一个输出，其中包含一个链接，该链接是主文件。当您尝试打开链接的页面时，下一页将运行。之后，如果您离线并重新加载页面，页面的内容将保持不变。

浏览器缓存

通过保存常用页面的副本并在您返回时使用该副本呈现页面，Web 浏览器使用缓存来存储 HTML 网页。如果页面的日期与先前存储的副本上的日期匹配，则计算机将使用硬盘驱动器上的副本，而不是再次从 Internet 下载它。

当您访问网站时，您的浏览器会复制页面的部分内容并将其保存到计算机的硬盘驱动器中。您的浏览器还会保存以下一些项目：

  • 图片 - 徽标、图片、背景等。

  • HTML

  • CSS

  • JavaScript

简单来说，“静态资产”是指网站中从一次访问到下一次访问都不会更改的部分，并且通常由浏览器缓存。浏览器缓存提供了许多优于其缺点的优势。您只需要良好的防火墙、病毒扫描程序和常识即可确保计算机安全。

区别

虽然 AppCache 在用户在线时提供了与典型浏览器缓存相同的速度优势，但它最初是为了使网站能够离线使用而创建的。

它与浏览器缓存的主要区别在于，浏览器缓存仅保存您实际访问过的页面和相关资产，而您可以在清单文件中定义浏览器应缓存的所有资产（可能是您的整个网站）。

更新于: 2023年10月11日

215 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告