1

我正在开发一个性能是一个非常重要的问题的网络项目。

编辑：

情况：

我想添加一些有关用户工作流程的详细信息：

  1. 用户访问我网站的欢迎页面http://example.org/。
  2. 他单击一个链接以访问该页面http://example.org/mypage
  3. onclick- 已执行链接的处理程序。
  4. 处理程序使用 XHR 加载数据。
  5. 处理程序http://example.org/mypage动态创建。
  6. 处理程序将 mypage 保存在本地使用FileSystem APIat filesystem:http://example.org/mypage。编辑：（是filesystem:http://example.org/mypage存储在FileSystem客户端的本地资源）
  7. 处理程序扩展历史并将使用的地址栏的URLHistory API从http://example.org/(欢迎页面的 URL) 更改为http://example.org/mypage(用户想要查看的页面)。
  8. 用户同时浏览另一个页面。
  9. 稍后，用户http://example.org/mypage直接在地址栏中键入。
  10. 浏览器显示/加载filesystem:http://example.org/mypage（这是本地存储的版本http://example.org/mypage）而不是http://example.org/mypage. 这意味着：浏览器不会创建新请求，它使用本地存储的http://example.org/mypage.

如何让浏览器使用本地存储的页面版本而不是创建新请求？编辑： - 这就是我想在上面列表的#10 中做的事情。

编辑：

我的问题：

客户端已经在http://example.org/mypage上面列表的 #2 到 #7 中创建/生成。我不需要在其他时间创建该页面。这就是为什么我不希望浏览器创建对http://example.org/mypage.

这就是我想做的：

如果filesystem:http://example.org/mypage已经创建（如果用户已经访问过http://example.org/mypage）：

使用filesystem:http://example.org/mypage而不是http://example.org/mypage.

除此以外：

发送请求http://example.org/mypage

试图解决：

  1. 我不能使用清单文件的后备部分来执行以下操作：编辑：（除了原点）

    回退： http ://example.org/mypage 文件系统：http://example.org/mypage

为了让浏览器使用存储在 FileSystem 中的本地版本，因为 Fallback 指令仅在用户离线时使用，否则将被忽略。编辑：但我想使用filesystem:http://example.org/mypage而不是http://example.org/mypage，即使用户在线。

  1. 我知道我可以在服务器生成的页面的响应标头中使用 Expire 字段，以便不创建新请求并使用缓存版本。

但是，如果我使用 JS 和 XHR 在客户端动态创建页面会怎样。编辑：（我在 中描述了这种情况The situation）在客户端创建页面时，无法让客户端缓存该页面。这就是为什么我手动“缓存”页面FileSystem API以将其存储在客户端。

为了提高性能，我尝试存储用户已经在本地访问过的任何页面。当用户再次访问一个页面时，我会向他展示该页面的旧的、本地存储的版本，并且我的脚本会创建一个 XHR 以查明该页面是否同时发生了变化。

但是我怎样才能让浏览器使用页面的本地版本呢？我可以使用 FileSystem API 在客户端本地保存生成的页面，我可以为生成的页面选择一个 URL，以使用 History API 将其显示在浏览器的位置栏上。
当用户现在访问另一个站点然后按下后退按钮时，我可以通过事件处理程序捕获 onPopState 事件。
并且该事件处理程序可以使用 FileSystem API 加载动态创建的文件。
但是，如果用户不使用后退按钮并且如果他将我使用 History API 注册的 URL 直接输入到位置栏中，我该怎么办？
然后浏览器不会使用本地存储的页面版本，浏览器会创建一个从服务器加载页面的请求。

4

2 回答 2

0

不要将动态数据放在应用程序缓存中。如果您想将动态数据放入您的页面，然后使用 AJAX 从服务器获取它，将数据存储在Local Storage中，并通过 JavaScript 使用来自存储的数据填充页面（您可以为此挂钩到 History API）。

顺便说一句，这不起作用，因为后备条目必须在同一个域中：

FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage

一旦您的页面在应用程序缓存中（即它是本地存储的），浏览器将始终使用应用程序缓存中的版本，直到更新清单或用户删除缓存。你在页面上放什么过期标头并不重要，除非你放了一个很长的过期时间并且你经常更新清单，那么应用程序缓存很可能会从浏览器缓存中填充，而不是从服务器刷新。这就是为什么您放入应用程序缓存中的内容应该是静态文件的原因。使用 AJAX 获取动态内容。

于 2012-04-05T16:28:42.623 回答
0

您可以在 URL 的锚部分（即http://example.com/#mypage ）中使用对层次结构中的实际链接进行编码的 URL，例如“mypage” 。然后你可以使用 window.location.hash 来获取 # 之后的字符串并做任何你想做的事情。只需确保您的根目录（或 # 前面的任何内容）位于 AppCache 中。

于 2013-02-05T22:13:33.743 回答