DOMContentLoaded
触发:浏览器完全加载了HTML,并构建了DOM树,但是像图片和样式表这样的外部资源可能还没有加载。
作用:DOM已经准备好了,所以处理程序可以查找DOM节点,初始化接口。
load
触发:浏览器加载了所有资源(图片,样式等)。
作用:额外的资源被加载,我们可以得到图像大小(如果没有在HTML/CSS中指定)等等。
beforeunload/unload
触发:当用户离开页面时。
作用:当用户要离开,我们可以检查用户是否保存了更改,并询问他是否真的想要离开;或者离开后发送一些数据报告等
readystatechange
触发:当文档状态发生改变时。
作用:document.readyState可以获取当前文档的加载状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"
<title>彻底搞懂JavaScript页面的生命周期</title>
<style>
.container {
display: flex;
}
</style>
<link rel="stylesheet" href="./index.css" />
<script>
document.addEventListener("DOMContentLoaded", () => {
alert("DOM ready!");
const ing = document.querySelector("#img");
alert(img.offsetWidth);//此处结果为0
}};
window.addEventListener("load", () => {
alert("load!");
}};
window.addEventListener("beforeunload",() => {
alert("beforeunload!");
}};
window.addEventListener("unload", () => {
alert("unload!");
}};
document.addEventListener("readystatechange",() => {
alert("readyState:" + document.readyState);
}):
</script>
<script src="./outside.js"></script>
<script defer src="./outside-defer.js"></script>
<script async src="./outside-async.js"></script>
</head>
<body>
<script>
alert("inline.");
</script>
<script>
alert(getComputedStyle(document.body).width);
</script>
<img
src=
"https://ss3.bdstatic.com/70cfv8Sh_Q1YnxGkpowK1HF6hhy/it/u=990820545,1319833086&fm=26&gp=0.jpg"
<div class="container">
<div class="content"></div>
</div>
</body>
</html>
执行顺序
1.alert(“outside.”);
2.alert(“inline.”);
3.alert(getComputedStyle(document.body).width);
4.alert(“defer.”);
5.readyState:interactive;
6.alert(“DOM ready!”);
7.readyState:interactive;
8.alert(“load!”);
9.alert(“beforeunload!”);
10.alert(“unload!”);
在alert(“defer.”)之前或之后,也有可能在alert(“DOM ready!”)之前或之后。
1.script中defer与async的异同
共同点:两者都告诉浏览器可以继续处理页面,并在“后台”加载脚本,然后在加载时运行脚本。因此脚本不会阻止DOM构建和页面呈现。
不同点:如果一个页面中有多个带有defer修饰符的script标签,它们会按照顺序进行加载并且在DOMContentLoaded之前执行;async修饰符则不会遵循顺序,它什么时候加载完成什么时候执行(有可能在DOMContentLoaded之前,也有可能在DOMContentLoaded之后)。
使用场景:defer一般用在脚本相互依赖性的时候,能保证执行顺序;而async比较适用于完全独立的脚本。
2.script中defer与async的异同
动态script的默认行为是async
1.异步,不会阻塞渲染;
2.先加载完成,先运行
三、在DOMContentLoaded中访问img属性
DOMContentLoaded不会等待img加载完成,建议不要在DOMContentLoaded中访问img的相关属性。
四、外部样式是否会阻塞DOMContentLoaded的执行
-
一般情况,外部样式不会阻塞DOMContentLoaded的执行;
-
如果外部样式表后有script脚本访问样式属性,则会阻塞script脚本的执行(script脚本会等待外部样式加载完成后执行),从而会阻塞DOMContentLoaded的执行。
五、readyState
如果我们在加载文档之后监听DOMContentLoaded,它永远不会执行;在需要的时候,我们可以监听readystatechange事件,通过document.readyState来获得文档的当前状态。
document.readyState三态:
“loading” – 文档正在加载中;
“interactive” – 文档已经准备完全好;
“complete” – 文档和所有资源加载完成。
document.readyState:interactive与DOMContentLoaded相同;document.readyState:complete与window.onload相同。