追踪用户关闭网页

异步ajax、img标签上传数据、beacon API比较

1、异步ajax

function log() {
    let xhr = new XMLHttpRequest();
    xhr.open('post', '/log', true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send('foo=bar');
}

window.addEventListener('unload', function(event) {
    log();
    for (let i = 1; i < 10000; i++) {
        for (let m = 1; m < 10000; m++) { continue; }
    }
});

2、img标签上传数据
后缀img.jpg?c=xxxx

const reportData = (url, data) => {
    let img = document.createElement('img');
    const params = [];
    Object.keys(data).forEach((key) => {
        params.push(key+'='+encodeURIComponent(data[key]));
    });
    img.onload = () => img = null;
    img.src = url+'?'+params.join('&');
};

3、beacon API
70%不到的成功率

navigator.sendBeacon('/log', 'foo=bar');

---

beforeunload不能准确的判断刷新和关闭
navigator.sendBeacon不能捕捉直接关闭浏览器或任务管理器结束任务
还是后端监听心跳做比较好

---