页面生命周期：DOMContentLoaded, load, beforeunload, unload

HTML页面的生命周期有以下三个重要事件：
1）DOMContentLoaded：浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像和样式表等外部资源可能并没有下载完毕，此时DOM加载完毕，所以js可以访问所有DOM节点，初始化界面；
2）load：浏览器已经加载了所有的资源（图像、样式表等），此时附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）；
3）beforeunload/unload：当用户离开页面的时候触发，此时用户正在离开页面，可以询问用户是否保存了更改以及是否确定要离开页面；

一、DOMContentLoaded
DOMContentLoaded由document对象触发；
我们使用addEventListener来监听它：

二、DOMContentLoaded和脚本
当浏览器在解析HTML页面时遇到了标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本，所以DOMContentLoaded有可能在所有脚本执行完毕后触发；
外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以DOMContentLoaded也会等待外部脚本；
不过有两个例外是带async和defer的外部脚本，他们告诉浏览器继续解析而不需要等待脚本的执行，所以用户可以在脚本加载完成前可以看到页面，有较好的用户体验；

async和defer属性仅仅对外部脚本起作用，并且他们在src不存在时会被自动忽略；

它们都告诉浏览器继续处理页面上的内容，而在后台加载脚本，然后在脚本加载完毕后再执行，所以脚本不会阻塞DOM树的构建和页面的渲染；

（译注：其实这里是不对的，带有async和defer的脚本的下载是和HTML的下载与解析是异步的，但是js的执行一定是和UI线程是互斥的，像下面这张图所示，async在下载完毕后的执行会阻塞HTML的解析）

defer/async的区别

• 带有async的脚本是优先执行加载完的脚本，他们在页面中的顺序并不影响他们执行的顺序，带有defer的脚本按照他们在页面中出现的顺序依次执行；带有async的脚本也许会在页面没有完全下载完之前就加载，这种情况会在脚本很小并且页面很大的情况下发生，所以async用在那些完全不依赖其他脚本的脚本上；
• 带有defer的脚本按照他们在页面中出现的顺序依次执行，带有defer的脚本会在页面加载和解析完毕后执行；
• 外部样式表并不会影响DOM，所以DOMContentLoaded并不会被他们阻塞；不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完；

发生这种事情的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性，所以他们自然要等到样式加载完毕才可以执行；这就导致DOMContentLoaded需要等待脚本的执行，脚本又需要等待样式的加载；

三、浏览器的自动补全

• Firefox，Chrome和Opera会在DOMContentLoded执行时自动补全表单，例如，如果页面有登录的界面，浏览器记住了该页面的用户名和密码，那么在DOMContentLoaded运行的时候浏览器会试图自动补全表单（如果用户设置允许）；
• 所有如果DOMContentLoaded被一个需要长时间执行的脚本阻塞，那么自动补全也会等待，你也许见过某些网站（如果你的浏览器开启了自动补全），浏览器并不会立刻补全登录项，而是等到整个页面加载完毕后才填充，这就是因为在等待DOMContentLoaded事件；使用async和defer的脚本的一个好处就是，他们不会阻塞DOMContentLoaded和浏览器自动补全（其实执行还是会阻塞的）；

四、window.onload对象

• window对象上的onload事件在所有文件包括样式表，图片和其他资源下载完毕后触发；

window.onload = function() {
    alert('page loaded');
    alert(`Image size: ${img.offsetWidth}*${img.offsetHeight}`); // Image size:177*160
}

五、window.onunload事件

• 用户离开页面的时候，window对象上的unload事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上，所以我们需要另一个事件--onbeforeunload；

六、window.onbeforeunload事件

• 如果用户即将离开页面或者关闭窗口时，onbeforeunload事件将会被触发以进行额外的确认，浏览器将显示返回的字符串；

window.onbeforeunload = function(){
    return "There are unsaved changes.leave now?";
  }

有些浏览器像chrome和火狐会忽略返回的字符串取而代之显示浏览器自身的文本，这是为了安全考虑，来保证用户不受到错误信息的误导；
七、readyState事件

• 如果我们在整个页面加载完毕后设置DOMContentLoaded会发生什么呢？答案是什么也没有，DOMContentLoaded不会被触发；
• 有些情况下我们无法确定页面上是否已经加载完毕，比如一个带有async的外部脚本的加载和执行是异步的（注：执行并不是异步的），在不同的网络状况下，脚本有可能是在页面加载完毕后执行也有可能是在页面加载完毕前执行，我们无法确定，所以我们需要知道页面加载的状况；
• document.readyState属性返回当前文档的状态，该属性返回以下值：
  1）uninitialized还未开始载入；
  2）loading载入中；
  3）interactive已加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载，文档与用户可以开始交互；
  4）complete文档和所有子资源已完成加载，状态表示load事件即将被触发；

// 检查document.readyState的状态，如果没有就绪可以选择挂载事件，如果已经就绪了就可以直接立即执行；
function work() { /*...*/ }
  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', work);
  } else {
    work();
  }

// 每当文档的加载状态改变的时候就有一个readystatechange事件被触发，所以我们可以打印所有的状态
// current state
  console.log(document.readyState);

// print state changes
  document.addEventListener('readystatechange', () => console.log(document.readyState));

八、readystatechange的在各个事件中的执行顺序

[1] initial readyState:loading
[2] readyState:interactive
[2] DOMContentLoaded
[3] iframe onload
[4] readyState:complete
[4] img onload
[4] window onload

• 广括号中的数字表示他们发生的时间，真实的发生时间会更晚一点，不过相同数字的时间可以认为是在同一时刻被按顺序触发（误差在几毫秒之内）；
• document.readyState 在 DOMContentLoaded前一刻变为interactive，这两个事件可以认为是同时发生；
• document.readyState 在所有资源加载完毕后（包括iframe和img）变成complete，我们可以看到complete、 img.onload和window.onload几乎同时发生，区别就是window.onload在所有其他的load事件之后执行；

九、总结
       1）同步的JavaScript脚本最先执行，它先于DOMContentLoaded事件执行；
       2） DOMContentLoaded事件在DOM树构建完毕后被触发，可以在这个阶段使用js去访问元素，此时async和defer脚本可能还没有执行，图片及其他资源文件可以有还在下载中；
       3）window.onload事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久；
       4）window.beforeunload在用户即将离开页面时触发，它会返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开；
       5）window.unload事件，当用户最终离开时会触发该事件，在unload的事件处理程序中，我们只能做简单的事情，不涉及延迟或询问用户，由于这个限制，它很少使用；
       5）document.readyState表征页面的加载状态，可以在readystatechange中追踪页面的变化状态；
            ①uninitialized：页面还未开始载入；
            ②loading：页面正在加载中；
            ③interactive：页面解析完毕，时间上和DOMContentLoaded同时发生，不过顺序在它之前；
            ④complete：页面上的资源都已加载完毕，时间上和window.onload同时发生，不过顺序在他之前；

• 一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行，而不要放在window.onload中执行；
  参考链接：https://segmentfault.com/a/1190000011468675