js浏览器页面生命周期

最新推荐文章于 2023-08-22 17:40:39 发布

月疯

最新推荐文章于 2023-08-22 17:40:39 发布

阅读量2.4k

点赞数 4

分类专栏：【javascript】文章标签： html html5 css

本文链接：https://blog.csdn.net/chehec2010/article/details/119990799

版权

【javascript】专栏收录该内容

35 篇文章 4 订阅

订阅专栏

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> 和记录事件的处理程序的文档：

<script>
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

方括号中的数字表示发生这种情况的大致时间。标有相同数字的事件几乎是同时发生的（± 几毫秒）。

在 DOMContentLoaded 之前，document.readyState 会立即变成 interactive。它们俩的意义实际上是相同的。
当所有资源（iframe 和 img）都加载完成后，document.readyState 变成 complete。这里我们可以发现，它与 img.onload（img 是最后一个资源）和 window.onload 几乎同时发生。转换到 complete 状态的意义与 window.onload 相同。区别在于 window.onload 始终在所有其他 load 处理程序之后运行。

月疯

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js浏览器页面生命周期

DOMContentLoaded、load、beforeunload、unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded—— 浏览器已完全加载 HTML，并构建了 DOM 树，但像<img>和样式表之类的外部资源可能尚未加载完成。 load—— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeunload/unload—— 当用户正在离开页面时。每个事件都是有用的：DOMContentL...
复制链接

扫一扫