前端全（无）埋点之页面停留时长统计

当前页面关闭统计方案

当前页面关闭统计方案解的思路就是阻塞页面关闭，先发数据统计请求，然后再关闭页面

1 解决方案一： 阻塞式的 Ajax 请求

XMLHttpRequest::open方法的第三个参数，如果设置为false就是同步加载

window.addEventListener('unload', function(event) {
    var xhr = new XMLHttpRequest(),
    xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    xhr.open('post', '/log', false); // 同步请求
    xhr.send(data);
});
复制代码

这样可以阻塞页面关闭，当然可以在readState为2的时候就abort请求，因为我们不关心响应的内容，只要请求发出去就行了。

2 解决方案二： 暴力的死循环

原理跟上面类似，只不过是使用一个空的死循环阻塞页面关闭

window.addEventListener('unload', function(event) {
  send(data);
  var now = +new Date;
  while(new Date - now >= 10) {} // 阻塞 10ms
});
复制代码

3 发一个图片请求阻塞

大部分浏览器都会等待图片的加载，趁这个机会把统计数据发送出去

window.addEventListener('unload', function(event) {
  send(data);
  (new Image).src = 'http://example.com/s.gif';
});
复制代码

小结

以上提到的几个方案都是一个原理，让浏览器继续保持阻塞状态，等数据发送出去后再跳转，这里存在的问题是：

• 少量浏览器下可能不奏效
• 等待一会儿再跳转，用户体验上打了折扣，尤其是移动端上

作者：zuopf769
链接：https://juejin.cn/post/6844903513613418503
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参考：前端全（无）埋点之页面停留时长统计