js浏览器页面生命周期
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js浏览器页面生命周期相关的知识，希望对你有一定的参考价值。
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处理程序之后运行。
以上是关于js浏览器页面生命周期的主要内容，如果未能解决你的问题，请参考以下文章