js浏览器页面生命周期

快来打我* 2022-09-09 06:17 214阅读 1赞

> DOMContentLoaded、load、beforeunload、unload

> HTML 页面的生命周期包含三个重要事件：
> 
>  *  `DOMContentLoaded` —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 `<img>` 和样式表之类的外部资源可能尚未加载完成。
>  *  `load` —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
>  *  `beforeunload/unload` —— 当用户正在离开页面时。
> 
> 每个事件都是有用的：
> 
>  *  `DOMContentLoaded` 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
>  *  `load` 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
>  *  `beforeunload` 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
>  *  `unload` 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

具体用法：DOMContentLoaded

> `DOMContentLoaded` 事件发生在 `document` 对象上。使用 `addEventListener` 来捕获它

<!doctype html>
    <body>
    <script>
      function ready() {
        alert('DOM is ready');
    
        // 图片目前尚未加载完成（除非已经被缓存），所以图片的大小为 0x0
        alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
      }
    
      document.addEventListener("DOMContentLoaded", ready);
    </script>
    
    <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
    </body>

window.onload

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

<!doctype html>
    <body>
    <script>
      window.onload = function() { // 与此相同 window.addEventListener('load', (event) => {
        alert('Page loaded');
    
        // 此时图片已经加载完成
        alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
      };
    </script>
    
    <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
    </body>

window.unload

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

> 我们希望通过 `unload` 事件将数据保存到我们的服务器上。
> 
> 有一个特殊的 `navigator.sendBeacon(url, data)` 方法可以满足这种需求

let analyticsData = { /* 带有收集的数据的对象 */ };
    
    window.addEventListener("unload", function() {
      navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
    });

> 1、请求以post发送
> 
> 2、不仅客服发送字符串，还可以发送表单格式
> 
> 3、数据大小限制在64kb

window.beforeunload

> 如果我们要取消事件，浏览器会询问用户是否确定。

window.onbeforeunload = function() {
      return false;
    };

readyState

> 在某些情况下，我们不确定文档是否已经准备就绪
> 
> `document.readyState` 属性可以为我们提供当前加载状态的信息。
> 
> 它有 3 个可能值：
> 
>  *  `loading` —— 文档正在被加载。
>  *  `interactive` —— 文档被全部读取。
>  *  `complete` —— 文档被全部读取，并且所有资源（例如图片等）都已加载完成。

function work() { /*...*/ }
    
    if (document.readyState == 'loading') {
      // 仍在加载，等待事件
      document.addEventListener('DOMContentLoaded', work);
    } else {
      // DOM 已就绪！
      work();
    }

readystatechange

> 会在状态发生改变时触发，因此我们可以打印所有这些状态

<!DOCTYPE html>
    <script>
    "use strict";
    
    // 当前状态
    console.log(document.readyState);
    
    // 状态改变时打印它
    document.addEventListener('readystatechange', () => console.log(document.readyState));
    </script>

这是一个带有 `<iframe>`，`<img>` 和记录事件的处理程序的文档：

> 方括号中的数字表示发生这种情况的大致时间。标有相同数字的事件几乎是同时发生的（± 几毫秒）。
> 
>  *  在 `DOMContentLoaded` 之前，`document.readyState` 会立即变成 `interactive`。它们俩的意义实际上是相同的。
>  *  当所有资源（`iframe` 和 `img`）都加载完成后，`document.readyState` 变成 `complete`。这里我们可以发现，它与 `img.onload`（`img` 是最后一个资源）和 `window.onload` 几乎同时发生。转换到 `complete` 状态的意义与 `window.onload` 相同。区别在于 `window.onload` 始终在所有其他 `load` 处理程序之后运行。