JS事件—unload、beforeunload

    unload和beforeunload是在窗口卸载的时候会触发，可以在用户刷新或者关闭窗口的时候处理一些逻辑，如果在两个事件监听中添加 alert、confirm、prompt会忽略，所以我们想提示用户或者想调试一下这种方法是不可行的，要是在事件中添加debugger，窗口关闭的时候可以跟进断点，但是刷新的时候断点也被忽略了。废话少说直接上测试代码

//以两种方式去绑定事件，事件触发写在本地存储中
window.onunload = function(){
	localStorage.setItem("onunload","window.unload");
}
window.onbeforeunload = function(){
	localStorage.setItem("onbeforeunload","window.beforeunload");
}
 window.addEventListener('unload', ()=>{
   localStorage.setItem("unload","addEventListener.unload");
});
window.addEventListener('beforeunload', ()=>{
    localStorage.setItem("beforeunload","addEventListener.beforeunload");
});

    来看一下在Chrome浏览器中的测试结果（刷新关闭效果一样）

    在看一下在Firefox中的测试结果（刷新关闭效果一样）

    IE请自行测试吧。那结论就是，都会触发beforeunload和unload事件，但是两者唯一的区别就是，对于Firefox来说永远先执行window.onbeforeunload然后在执行add绑定的beforeunload,unload两者一致。想了解更多点击事件参考|MDN。

    顺带在补充一点吧，我们平时如果有一些socket连接，或者需要大量计算，当我们考虑到浏览器关闭或窗口隐藏切换节省性能时，我们可以监听窗口的状态去暂停一些计算或者请求

document.addEventListener('visibilitychange', ()=>{
    if(document.visibilityState === 'hidden') {
         console.log('检测当前浏览器为关闭状态');
    } else {
         console.log('检测当前浏览器为开启状态');
    }
);

---------- 2019.07.01----------

今天在刷知乎的时候看到一篇页面卸载发送Ajax请求的文章，所以也想把学习的补充进来，我们首先想到的就是

var oAjax = new XMLHttpRequest();
				
oAjax.open('POST', 'http://127.0.0.1:8686/user/register', false); 

oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				
oAjax.onreadystatechange = function() {
  if(oAjax.readyState == 4 && oAjax.status == 200) {
    console.log(oAjax.responseText);
  } else {
    console.log(oAjax);
  }
};
				
oAjax.send('a=1&b=2');

还有一种方法

window.addEventListener("beforeunload", function(event) {

  var blob = new Blob(['room_id=123'], {
    type: 'application/x-www-form-urlencoded'
  });

  navigator.sendBeacon("http://127.0.0.1:8686/user/register", blob);
});

根据知乎作者的意思，当浏览器触发unload时会abort文档，所以他设置同步的ajax请求，但是这样会导致用户体验不友好，关闭有延迟，我在测试时在beforeunload中同步异步均可收到页面的请求。navigator.sendBeacon是一个相对保险的，它主要就是为了这种情况而建立的。

参考链接：https://zhuanlan.zhihu.com/p/68838820