页面生命周期

页面生命周期

HTML 页面的生命周期包含三个重要事件：

DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像和样式表之类的外部资源可能尚未加载完成。

load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

beforeunload/unload —— 当用户正在离开页面时。

每个事件都是有用的：

DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。

load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。

beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。

unload 事件 —— 用户几乎已经离开，但是我们仍然可以启动一些操作，例如发送统计数据。

DOMContenLoaded

当浏览器遇到script标签，会在DOM构建之前运行它，因为脚本可能想要修改DOM，对其执行write操作，所以 DOMContentLoaded必须等待脚本执行结束。

外部样式表不会影响DOM，因为DOMContenLoaded不会等待他们。

但是，如果在样式后面有一个脚本，那么该脚本必须等待样式表加载完成：

<link type="text/css" rel="stylesheet" href="style.css">

<script>

// 在样式表加载完成之前，脚本都不会执行

alert(getComputedStyle(document.body).marginTop);

</script>

原因是，脚本可能想要获取元素的坐标或其他与样式相关的属性，如上例所示。因此，它必须等待样式加载完成。

当 DOMContentLoaded 等待脚本时，它也在等待脚本前面的样式。

不会阻塞 DOMContentLoaded 的脚本

1. 具有 async 特性的脚本不会阻塞 DOMContentLoaded
2. 使用 document.createElement('script') 动态生成并添加到网页的脚本也不会阻塞 DOMContentLoaded。

onload

当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。

onunload

当访问者离开页面时，window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的操作，例