以下内容是在谷歌浏览器测试，总结的。
页面加载
事件顺序: readystatechange --- DOMContentLoaded --- load
1.readystatechange
当文档的 readyState 属性发生改变时，会触发 readystatechange 事件。
2.DOMContentLoaded
只要页面 DOM 加载完成就触发，无需等待依赖资源的加载（当纯 HTML 被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。）
3.load
在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。
// 这里是给document添加的事件(window也能触发)
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOMContentLoaded'); // 译者注："DOM 完全加载以及解析"
});
// 这里是给document添加的事件(window不能触发)
document.addEventListener('readystatechange', (event) => {
console.log('readystate' + ' ' + document.readyState)
})
// 这里是给 window添加的事件(document不能触发)
window.addEventListener('load', (event) => {
console.log('load')
})
执行顺序如下
image.png
页面关闭
事件顺序：beforeunload --- unload
1.beforeunload
当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。
注意：
该事件触发，在各个浏览器中效果是不一样的。大致统计了如下结果。
1.HTML 规范指出在此事件中调用window.alert()，window.confirm()以及window.prompt()方法，可能会失效。
2.将事件处理程序/监听器加到window或 document的beforeunload事件后，将阻止浏览器使用内存中的页面导航缓存，例如Firefox 的 Back-Forward 缓存或WebKit 的 Page Cache。
3.根据规范，要显示确认对话框，事件处理程序需要在事件上调用preventDefault()。
4.注意事件触发情况。（1、第一次进入页面会刷新。2、页面有点击事件或input事件触发之后，该事件也能触发）。
6.其它参考，参考1，参考2
2.unload
当文档或一个子资源正在被卸载时，触发 unload事件。
页面刷新
事件顺序：beforeunload --- unload --- load
记录：在关闭和刷新浏览器时，上述事件会被触发，但在编码的时候不会很明显。可以借助其它工具来看，事件是否被触发。
