如何在用户的浏览器中缓存我的网站

How can I cache my website in the user's browser?

本文关键字：缓存 我的 网站 浏览器 用户      更新时间：2023-09-26

我找到了很多关于缓存的解释，其中一些甚至有示例，但是，理解它以及如何使用它有点模糊。我已经尝试多次使用它，但我失败了（我想提高速度，我只想从服务器加载必要的内容）。你能帮我把下面的这个页面保存在浏览器的缓存中吗，如果可能的话，给我一个解释或不同的方法来做（也可以是JS！

PS：如果你给我一个适合这个页面的例子，它可以是Appcache;)。

提前谢谢。

我的应用程序缓存文件的名称：offline.appcache。

缓存清单

/样式.csshttp://sistema.agrosys.com.br/sistema/labs/CSS_HTML/html1.html

<!DOCTYPE html>
<html lang="en" manifest="/offline.appcache">
<head>
  <meta name="viewport" content="width=device-width" />
  <title>page1</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="testing_class">Test</div>
  <div class="testing_clas">Test</div>
  <div class="testing_cla">Test</div>
  <div class="testing_cl">Test</div>
  <div class="testing_c">Test</div>
  <div class="testing_">Test</div>
</body>
</html>

重新考虑使用 AppCache 。使用它并不一定意味着您的网站将脱机工作。基本上，以下是AppCache采取的步骤，无论浏览器连接状态如何：

  1. 要求服务器提供清单文件。
  2. 如果清单文件未更改，它将提供本地文件。
  3. 如果清单文件已更改，它将下载新文件，保存它们，然后提供它们。

既然你提到

我想提高速度，我只想从服务器加载必要的

AppCache是一个完全有效的解决方案。

编辑：使用AppCache的快速示例：

在原始 HTML 的开头：

<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html manifest="example.appcache">
    <head>

您只需要标签中的"清单"。然后，示例.appcache文件将是：

CACHE MANIFEST
CACHE:
http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.4/jquery-ui.js
NETWORK:
*
http://*
https://*

只需在缓存部分包含您的网站使用的任何静态内容即可。

您还可以在清单文件中放置版本号或日期，以确保浏览器在需要时获取新内容。

缓存用于避免重新下载经常重复使用的文件（跨多个页面或多个会话），但它主要针对那些属于"资产"类别（CSS、javascript、图像等）的文件，并且预计会保持冻结状态。但是，网页（HTML）的内容预计不会保持冻结状态（例如搜索结果等），并且通常大小合理，因此没有真正的理由费心缓存它（谁仍然有56k连接真的？

然后，还有HTML"静态页面"的情况，但通常这些页面只包含文本，与其他媒体相比，文本非常轻（除非你有一整本书），所以大多数人不会为此烦恼。

现在，如果您真的想"缓存"HTML，那么它与保留离线版本完全相同，那么为什么不使用Appcache呢？

相关文章：