监听页面关闭

1.beforeunload

当浏览器窗口刷新或关闭时，会触发beforeunload事件。当前页面可见，不会直接关闭，可以点击确定按钮关闭或刷新页面，也可以取消刷新和关闭。

事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。

根据规范，要显示确认对话框，事件处理程序需要在事件上调用preventDefault()。

HTML规范指出应该使用 Event.preventDefault() 而非 Event.returnValue，然而，不是所有浏览器都支持这么做。

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

2.unload事件

当文档或一个子资源正在被卸载时, 触发 unload事件

它在下面两个事件后被触发:
1.beforeunload (可取消默认行为的事件)
2.pagehide

文档处于以下状态：

• 所有资源仍存在（图片，iframe等）
• 对于用户所有资源均不可见
• 界面交互无效（window.open,alert,confirm等）
• 错误不会停止卸载文档的过程

3.上报请求

如果我们在监听事件中发送ajax来上报数据，请求会被浏览器abort。因为在页面卸载的时候，浏览器并不能保证异步的请求能够成功
对于这个行为，我们可以使用下面的方式：
1.发送同步ajax

此种方式用户需要等待请求结束才可以关闭页面，会影响用户体验

2.发送异步ajax，但在服务端忽略ajax的abort

此种方式需要后台进行改造，成本太大

3.使用navigator.sendBeacon发送异步请求

使用：navigator.sendBeason(url [,data]);
其中data可以是 ArrayBufferView、Blob、DOMString、FormData等类型