1. 监听页面离开

页面离开包括跳转到新页面和关闭页面
注意：例如手机端直接切到后台并关闭浏览器应用，则无法触发事件。
且执行以下方法时，alert，console这些方法已经被注销了，无法调用。

beforeunload

在unload之前触发，可用于阻塞页面退出（Chrome不支持自定义文案）（因过于流氓，现代浏览器基本阉割了阻塞功能）

  window.onbeforeunload = function (e) {
    var e = e || window.event,
      dialogText = '页面还未保存，确定要离开吗？';//该自定义内容仅在老版本浏览器中有效
    if (e) {
      e.returnValue = dialogText;
    };
    return dialogText;
  };

pagehide

不同浏览器内表现形式不同，在微信等应用内仅有pagehide而无beforeunload事件。

2. 离开时调用接口

直接调用异步ajax

无法完成三次握手，接口会被cancel
可以通过服务器端配置ignore_user_abort防止接口cancel

调用同步ajax

例如jquery的ajax配置async:false即可，但由于阻塞页面关闭或跳转，2019年底开始Chrome已不再支持

通过图片src

创建img并将其src设为待请求的get链接，本质上同调用同步ajax

navigator.sendBeacon

专用于离开页面时埋点，会发起一个POST类型的HTTP请求，data可以为字符串或FormData，也可以不传data直接在url中拼接query

window.addEventListener("pagehide", function () {
  navigator.sendBeacon(url,data);
});

使用websocket等长连接方式

使用fetch，设置keepalive:true

传输数据大小限制：无法发送兆字节的数数据，我们可以并行执行多个 keepalive 请求，但它们的 body 长度之和不得超过 64KB。