当前页面关闭统计方案
当前页面关闭统计方案解的思路就是阻塞页面关闭，先发数据统计请求，然后再关闭页面
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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
