服务器发送响应但客户端未加载发送的内容

Question

我有简单的节点服务器（nodejs + express + ejs呈现） ，当用户尝试加载特定的页面服务器时，发送该编译的html并发送该响应。

为了跟踪用户，我添加了2个计数器

一个。 计数器，当服务器收到该页面的请求时递增

湾 当客户端加载页面时，它包含一些代码，这些代码会将HTTP请求返回到我用作计数器的服务器

现在问题是随着时间的推移， sentResponse计数器和clientLoad计数器之间的差异增加了很多，所以我得到sentResponse = 7000和clientLoad = 3600 。

关于什么可能导致这种行为的任何建议

注意：在请求到达我的服务器之前我也设置了Cloudfare并且我暂停了它但是我仍然遇到了巨大的差异？

注意：我也注意到很多用户经常在4s以下多次向页面发出请求，但我确信我发送的是有效的html而且我的差异几乎是50％所以我不认为每个访问该页面的用户都是在4s下按ctrl + r 2次或更多次。

码：

server.js

app.get('/dashboard', (res, res) => {
    ...
    ...
    ...

    Tracker.incrementCount('sentResponse');
    res.render(page.ejs, {...});
});

app.get('/client-load-start', (req, res) => {
    Tracker.incrementCount('clientLoadStart');
    res.send(200);
});

page.ejs

<html>
    <head>
        ...
        <script src='/client-load-start?version=<some_random_4_digit_number>'></script>
        ...
    </head>

    <body>
        ...
        ...
    </body>
</html>

Answer 1

我可以想到为什么计数可能不同的以下可能性。

设置缓存标头（Cache-Control）可能会导致浏览器缓存请求。
JS没有在客户端的浏览器中启用，因此不可能对服务器进行AJAX调用来更新clientLoad计数器（这是不太可能的，但仍然是可能的一种）。
人们甚至在加载页面之前就与页面进行了交互，导致AJAX调用无法触发。 人们在页面加载之前重新加载页面。

如果你只是想跟踪

页面点击，您可以使用“sentResponse”计数器。
活跃用户，考虑网络套接字（计算我网页的点击次数）

Answer 2

您可以尝试使用缓存清除方法。 每次浏览器加载/dashboard ，浏览器都会获得/client-load-start路由的脚本源。 问题是唯一的时间/client-load-start是在清除浏览器的缓存时，还是第一次加载站点时。 这将导致两个计数随时间变化很大的问题。

尝试让浏览器认为/client-load-start是一个需要下载的新脚本。 您可以通过向src添加查询参数来完成此操作。

<script src='/client-load-start?<%- Date.now()%>=1'></script>

每次浏览器转到/dashboard它都会尝试下载新脚本，因为查询参数已更改，从而破坏了缓存。

Answer 3

事件顺序

浏览器请求/dashboard
服务器增加sentResponse ，显示并发送page.ejs到浏览器
浏览器接收page.ejs并检测<script>标记
浏览器检查脚本URL是否在浏览器缓存中
- 如果在缓存中找到脚本URL，则序列在此结束; clientLoad保持不变
浏览器从您的服务器请求脚本
服务器执行get请求，增加clientLoad

问题

这里的“问题”是浏览器 - 或浏览器与服务器之间的任何代理 - 将缓存返回的脚本，除非您另外指示它。

请注意，在大多数情况下，缓存实际上是预期的和预期的行为。 这也是浏览器的默认行为。

解

要指示浏览器（或多个代理）避免缓存文件，您可以设置缓存控制标头。

app.get('/client-load-start', (req, res) => {
    Tracker.incrementCount('clientLoadStart');
    res
       .set('cache-control', 'max-age=0; private; no-cache')
       .send(200);
});

这将指示浏览器永远不会缓存请求并始终获取新副本，从而在每次请求时增加clientLoadStart 。

另一种方法是“ 缓存清除 ”，这意味着您有意更改脚本的URL，例如通过附加上面的随机数，从而“破坏”缓存键。

服务器发送响应但客户端未加载发送的内容

问题描述

3 个解决方案

解决方案1
1 2018-10-12 20:12:57

解决方案2
1 2018-10-16 01:08:28

解决方案3
0 2018-10-18 11:49:55

事件顺序

问题

解

服务器发送响应但客户端未加载发送的内容

问题描述

3 个解决方案

解决方案1 1 2018-10-12 20:12:57

解决方案2 1 2018-10-16 01:08:28

解决方案3 0 2018-10-18 11:49:55

事件顺序

问题

解

解决方案1
1 2018-10-12 20:12:57

解决方案2
1 2018-10-16 01:08:28

解决方案3
0 2018-10-18 11:49:55