HTML页面的生命周期
HTML页面的生命周期有以下三个重要事件：
DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 和样式表等外部资源可能并没有下载完毕。
load —— 浏览器已经加载了所有的资源（图像，样式表等）。
beforeunload —— 当用户即将离开当前页面（刷新或关闭）时触发。正要去服务器读取新的页面时调用，此时还没开始读取；
unload —— 在用户离开页面后触发。从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
每个事件都有特定的用途:
DOMContentLoaded —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。
load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在 HTML/CSS 中指定）
beforeunload —— 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
unload —— 删除本地数据localstorage等
DOMContentLoaded
DOMContentLoaded 由 document 对象触发。使用 addEventListener 来监听它：
document.addEventListener("DOMContentLoaded", () => {});
DOMContentLoaded 和脚本
当浏览器在解析 HTML 页面时遇到了 标签，将无法继续构建DOM树（UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起），必须立即执行脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。
外部脚本（带 src 的）的加载和解析也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本。带 async 的外部脚本，可能会在DOMContentLoaded事件之前或之后执行。带 defer 的脚本肯定会在在DOMContentLoaded事件之前执行。
DOMContentLoaded 与样式表
外部样式表并不会阻塞 DOM 的解析，所以 DOMContentLoaded 并不会被它们影响。
load
window 对象上的 load 事件在所有文件包括样式表，图片和其他资源下载完毕后触发。
window.addEventListener('load', function(e) {...});
window.onload = function(e) { ... };
beforeunload
当窗口即将被卸载（关闭）时, 会触发该事件。此时页面文档依然可见, 且该事件的默认动作可以被取消。beforeunload在unload之前执行，它还可以阻止unload的执行。
// 推荐使用
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '关闭提示';
});
window.onbeforeunload = function (e) {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = '关闭提示';
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '关闭提示';
};
unload
用户离开页面的时候，window 对象上的 unload 事件会被触发，无法阻止用户转移到另一个页面上。
// 推荐使用
window.addEventListener("unload", function(event) { ... });
window.onunload = function(event) { ... };
readyState
document.readyState 表示页面的加载状态，有三个值：
loading 加载 —— document仍在加载。
interactive 互动 —— 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete —— 文档和所有子资源已完成加载。 load 事件即将被触发。
可以在 readystatechange 中追踪页面的变化状态：
document.addEventListener('readystatechange', () => {
console.log(document.readyState);
});
Script标签：向HTML插入JS的方法
属性 值 描述
async async 立即下载脚本（仅适用于外部脚本）。
charset charset 表示通过src属性指定的代码的字符集
defer defer 表示脚本可以延迟到文档完全被解析和显示之后再执行（仅适用于外部脚本）。
language script(已废弃) 表示编写代码使用的脚本语言。用 type 属性代替它。
src URL 规定外部脚本文件的 URL。
xml:space preserve 规定是否保留代码中的空白。
type text/xxx language的替换属性，表示编写代码使用的脚本语言的内容类型,也称为MIME属性。
没有 defer 或 async，所有
async 和 defer 属性仅仅对外部脚本起作用，在 src 不存在时会被自动忽略。
