Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

页面跳太快,埋点请求发不出!

  最近有个神奇的统计埋点需求,统计一个表单的提交按钮点击。我本来觉得这种情况只是个普通的按钮点击而已,但过了几天统计数据告诉我,我的想法是错的!表单要是提交太快的话页面也会迅速跳转,最终统计的请求都没发成功页面就刷新了。
  确实页面跳转会导致正在连接的请求被中断,比如下面这个测试点击按钮后对图片的请求就会被取消 <button id="btn">点我将在请求的同时刷新</button>
<script>
btn.onclick = function() {
  new Image().src = 'http://www.web-tinker.com';
  setTimeout(function() {
    location.href += '';
  }, 16);
};
</script>
  这是个相当棘手的问题,异步通信会因为页面跳转而被取消。而且统计这种东西不能用同步,因为不能因为统计而影响用户体验。
  之前的想法是在点击此类按钮时不发送统计请求,仅将请求放入 localStorage 中队列起来。等到进入某些安全页面(不会瞬间就被关掉的页面)后再发送请求。但其实这么做依然无法解决问题,因为所谓的「安全页面」都并不安全。而且按钮被点击时不及时发送统计数据同样也会漏掉很多。
  但这个思路确实有点意义,在当前页面无法发送成功则到其他页面去发送。于是我又优化了这个思路,当用户点击时就发送信息,同时记录到 localStorage 队列中,只有当服务器正确响应 200 时才将队列里的这条记录删除掉。但这个想法会造成记录多次发送,因为有些记录也许已经发送到服务器,可能由于页面跳转过快,客户端没收到响应。对于这个问题我又引入了一个 Event Hash 的东西,每个事件都产生一个唯一标识符。那么即使被重复发送,服务器也可以通过标识符将它过滤掉。
  其实绕了一大圈,我的解决办法依然不太漂亮,但确实是一套能用的方案。同时也希望大家能分享一些更漂亮的解决方案。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^