上次做項目需要監控瀏覽器是否處於激活狀態，以及是否刷新和關閉，根據不同的狀態進行不同的操作，這裏整理一下這幾個相差事件。
事件說明：
window.onload：加載事件在頁面內容加載完成之後立即執行相應的函數
window.onbeforeunload：即將離開頁面（刷新或關閉）時觸發
window.onunload：用戶離開頁面時觸發
visibilitychange：事件判斷頁面可見性，瀏覽器標籤頁被隱藏或顯示的時候會觸發visibilitychange事件
下面通過一個簡單的示例，來看一下這幾個事件的執行順序
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" charset="UTF-8">
<title>TestPage</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div>
<input type="button" id="btn1" value="取消監聽visibilitychange">
</div>
</body>
</html>
<script>
/*當關閉瀏覽器時，執行順序onbeforeunload-->visibilitychange-->onunload*/
//window對象上的onload事件在所有文件包括樣式表，圖片和其他資源下載完畢後觸發
window.onload = () => {
console.log('window對象上的onload事件在所有文件包括樣式表，圖片和其他資源下載完畢後觸發');
};
//即將離開頁面（刷新或關閉）時觸發
window.onbeforeunload = () => {
console.log('1111關閉前事件');
debugger
}
//用戶離開頁面
window.onunload = () => {
console.log('2222onunload-用戶離開頁面');
debugger
//setTimeout(() => { window.close() }, 10000);//單位毫秒
};
//監聽當前窗口是否是活動窗口
if (document.hidden !== undefined) {
$(document).on('visibilitychange', () => {
var isHidden = document.hidden;
if (isHidden) {
//失去焦點
document.title = '小主，快回來';
console.log('visibilitychange--lost');
} else {
//未失去焦點
document.title = '激活窗戶';
console.log('visibilitychange--com');
}
});
}
//取消visibilitychange
$('#btn1').click(() => {
console.log('取消visibilitychange');
$(document).off('visibilitychange');
});
</script>
打開頁面後，首頁執行onload事件，然後最小化或切換瀏覽器table頁面時，會觸發visibilitychange事件，如下圖
刷新時會觸發onbeforeunload事件，關閉時則會觸發onbeforeunload，document.hidden，onunload，見下圖所示
總結：
1.頁面刷新時，觸發onbeforeunload事件
2.頁面關閉時，觸發onbeforeunload，document.hidden，onunload事件，
當關閉瀏覽器時，執行順序onbeforeunload-->visibilitychange-->onunload
關於document.ready 和 window.onload 的區別
document.ready 和 window.onload 的區別是：document.ready方法在DOM樹加載完成後就會執行，而window.onload是在頁面資源（比如圖片和媒體資源，它們的加載速度遠慢於DOM的加載速度）加載完成之後才執行。也就是說$(document).ready要比window.onload先執行