Question

我在页面上有一个“新项目”徽章，我想立即更新页面从缓存中加载（即，当点击“返回”或“转发”返回此页面时）。实现这一目标的最佳方法是什么？

设置非常简单。应用程序的布局每8秒查找一个新项目，并相应地更新徽章+项目列表。

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

当有人离开此页面查看项目的详细信息时，可能会发生很多事情。在任何用户查看它们之前，事情是“新的”，并且应用程序可能会有多个用户同时使用它（用于呼叫中心或支持服务单的工作流程类型）。

为了确保徽章始终是最新的，我有：

$(window).bind('focus load', function ( event ) {
    App.pollForNewItems();
});

..尽管这样做有效，但在“加载”上轮询新项目仅在从缓存加载页面时才有用。是否有可靠的跨浏览器方式来判断是否正在从缓存中加载页面？

Answer 1

导航时间现在在大多数浏览器中（即9 +） http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

 if (!!window.performance && window.performance.navigation.type === 2) {
   // page has been hit using back or forward buttons
 } else {
   // regular page hit
 }

Answer 2

您可以要求网络浏览器不缓存页面。试试这些HTTP标头：

Cache-control: no-cache
Cache-control: no-store
Pragma: no-cache
Expires: 0

特别是，Cache-control: no-store很有意思，因为它告诉浏览器不要将页面存储在内存中，这样可以防止在按下后退/前进按钮时加载过时的页面。

如果您这样做，则不必在页面加载时轮询数据。

Answer 3

部分hacky解决方案是在服务器上设置当前时间的var，并在页面顶部设置当前客户端时间的var。如果它们的差异超过某个阈值（1分钟？），那么您可以认为它是缓存的页面加载。

示例JS（使用服务器端的ASP.Net语法）：

var serverTime = new Date('<%= DateTime.Now.ToUniversalTime().ToString() %>');
var pageStartTime = Date.UTC(new Date());
var isCached = serverTime < pageStartTime &&
               pageStartTime.getTime() - serverTime.getTime() > 60000;

或者，在客户端使用cookie（假设启用了cookie），您可以检查具有当前版本页面的唯一密钥的cookie。如果不存在，则为其编写cookie，并且在任何其他页面访问中，cookie的存在表明它正在从缓存中加载。

E.g。（假设有一些cookie辅助函数可用）

var uniqueKey = '<%= SomeUniqueValueGenerator() %>';
var currentCookie = getCookie(uniqueKey);
var isCached = currentCookie !== null;
setCookie(uniqueKey); //cookies should be set to expire 
                      //in some reasonable timeframe

Answer 4

就个人而言，我会设置包含每个元素的项目ID的数据属性。

即

<ul>
  <li data-item-id="123">Some item.</li>
  <li data-item-id="122">Some other item.</li>
  <li data-item-id="121">Another one..</li>
</ul>

您的App.pollForNewItems函数将获取第一个元素的data-item-id属性（如果最新的元素是第一个元素），并将其与原始请求一起发送到服务器。

然后服务器只返回项WHERE id > ...，然后您可以将它们添加到列表中。

我仍然很困惑为什么你想知道浏览器是否有页面的缓存版本。

此外，是否有理由绑定到load而不是ready？

基督教

Answer 5

好的答案：https://stackoverflow.com/a/9870920/466363

您还可以使用导航时间来非常详细地测量网络延迟。

这是一篇好文章：http://www.html5rocks.com/en/tutorials/webperformance/basics/

如果fetchStart和responseStart之间的时差非常小，那么页面就是从缓存加载的。例如。

by stewe

我的页面是否从浏览器缓存中加载？

5 个答案: