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

I have a "new items" badge on a page that I want to update immediately the page is loaded from the cache (i.e. when hitting "Back" or "Forward" to return to this page). What is the best way to accomplish this?

我在页面上有一个“新项目”徽章,我想立即更新页面从缓存加载(即,当点击“后退”或“前进”返回此页面时)。完成此任务的最佳方法是什么?

The setup is pretty simple. The layout for the app looks for new items every 8 seconds, and updates the badge + list of items accordingly.

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

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

When someone navigates away from this page to look at the details of an item, a lot can happen. Things are "new" until any user has viewed them, and the app will likely have several user using it simultaneously (the kind of workflow used for a call center or support tickets).

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

To make sure that the badges are always up to date, I have:

为了确保徽章始终是最新的,我有:

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

..And though this works, polling for new items on 'load' is only useful when the page is loaded from the cache. Is there a reliable cross-browser way to tell if a page is being loaded from the cache?

..虽然这有效,但只有在从缓存加载页面时,轮询“加载”上的新项目才有用。是否有可靠的跨浏览器方式来判断是否正在从缓存加载页面?

5 个解决方案

#1

A partial hacky solution is to have a var with the current time set on the server, and set a var with the current client time at the top of the page. If they differ by more than a certain threshold (1 minute?) then you could assume it's a cached page load.

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

Example JS (using ASP.Net syntax for the server side):

示例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;

Alternatively, using cookies on the client side (assuming cookies are enabled), you can check for a cookie with a unique key for the current version of the page. If none exists, you write a cookie for it, and on any other page access, the existence of the cookie shows you that it's being loaded from the cache.

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

E.g. (assumes some cookie helper functions are available)

例如。 (假设有一些cookie辅助函数可用)

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

#2

Navigation Timing is in most browsers now(ie9+) http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

导航时间现在在大多数浏览器中(ie9 +)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
 }

#3

You can ask the web browser to not cache the page. Try these HTTP headers:

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

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

Particularly, Cache-control: no-store is interesting because it tells the browser to not store the page in memory at all which prevents a stale page being loaded when you hit the back/forward button.

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

If you do this instead, you don't have to poll for data on page load.

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

#4

Personally, I would set data attribute containing the item id for each element.

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

I.e.

<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>

Your App.pollForNewItems function would grab the data-item-id attribute of the first element (if newest are first) and send it to the server with your original request.

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

The server would then only return the items WHERE id > ... which you can then prepend them to the list.

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

I'm still confused as to why you want to know if the browser has a cached version of the page.

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

Also, is there a reason for binding to load instead of ready?

还有,有没有理由绑定加载而不是准备好?

Christian

#5

good answer: https://*.com/a/9870920/466363

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

You could also use Navigation Timing to measure the network latency in great detail.

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

Here is a good article: http://www.html5rocks.com/en/tutorials/webperformance/basics/

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

If the time difference between fetchStart and responseStart is very low, the page was loaded from cache, for example.

如果fetchStart和responseStart之间的时间差非常小,则例如从缓存加载页面。

by stewe

#1