浅析HTML页面生命周期

三个重要事件

• DOMContentLoaded

  浏览器已经加载完成HTML数据，并且构建了DOM树。但是如样式、图片之类的外部文件有可能仍未加载完成。所以，可以再此时寻找DOM元素，以及初始化接口。

  在遇到<script>标签之后，脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束，因为脚本有可能修改页面的DOM，所以DOMContentLoaded是在解析完脚本以后才执行。

  额外说明：

  • 如果在样式后面有一个脚本，那么该脚本必须等待样式表加载完成。原因是，脚本可能想要获取元素的坐标和其他与样式相关的属性。

• onload

  浏览器已经加载完全部的HTML以及图片、样式等外部资源。

• beforeunload 和 unload

  beforeunload：用户准备离开，可以提醒用户是否保存了数据，确认要离开页面。

  unload：用户马上离开。此时仍可以处理一些操作，如发送统计数据等。

  如果存在iframe，父iframe会在子iframe卸载前卸载。父beforeunload => 子beforeunload => 父unload => 子unload

DOMContentLoaded

• DOMContentLoaded 事件发生在 document 上， 必须使用 addEventListener 来监听它。

<script>
    document.addEventListener('DOMContentLoaded', function(){
        alert( 'DOMContentLoaded' );
    })
</script>

<script src="/js/01.js"></script>  // alert('01.js')

<script>
    alert('我是script1');
</script>

//弹出顺序： 01.js  /  我是script1 / DOMContentLoaded

• 浏览器表单的自动填充也是在DOMContentLoaded期间执行的。

window.onload

​ onload事件触发时，页面资源已经加载完成，因此可以使用 window.onload。

window.onbeforeunload

​ 在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

document.addEventListener("beforeunload", alert('确认离开?'));

window.onunload

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

题外话

卸载页面传送数据

在页面卸载的时候发送数据到服务器，通常想法就是在window.onunload或者window.beforeUnload事件，使用XMLHttpRequest对象异步发送数据。但是这种做法存在隐患，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。为此，浏览器提供了一个APInavigator.sendBeacon()方法。

navigator.sendBeacon(url, data)

• url:参数表明 data 将要被发送到的网络地址， post发送。

• data: 将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据。

• 返回值：当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

  // 方式一：监听调用
  window.addEventListener('unload', logData);
  function logData() {
      navigator.sendBeacon("/log", 'analyticsData');
  }
  // 方式二：window调用
  window.onunload = function(){
      const res = navigator.sendBeacon( '/log' , JSON.stringify({ name: 'name'}));
      alert(res);
  }
  

document.readyState

• 获取页面加载状态的信息。
• 有三个值
  • loading —— 文档正在被加载。
  • interactive —— 文档被全部读取。与 DOMContentLoaded 几乎同时发生，但是在 DOMContentLoaded 之前发生。
  • complete —— 文档被全部读取，并且所有资源（例如图片等）都已加载完成。与 window.onload 几乎同时发生，但是在 window.onload 之前发生。
• 监听事件 readystatechange 会在状态改变时候触发。