Web页面的生命周期函数

Web页面的生命周期图

document有 readyState 属性来描述 document 的 loading 状态
readystatechange 事件是跟踪文档状态的变更。

首先请求页面（文档）完成，这里忽略 loading（可以理解为速度很快）。
此刻，执行同步 js 脚本。在此期间，文档要进行加载并且解析，但资源任在加载中。
等到文档结束加载并且解析后，此时会触发 readystatechange 事件，通过 document.readyState 输出得 interactive
并且还会触发 DOMContentLoaded 事件，只不过要比前者慢。（此时资源还并没有全部加载完成）
等到资源加载完成后，会再次触发 readystatechange 此时 document 状态为 complete 。
接下来就是触发 load() 事件（此时资源就完全加载完成）

因此：一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行，而不要放在window.onload中执行。

其他事件

beforeunload 页面关闭之前会被触发
onpageshow 在用户浏览网页时触发
- 与 onload 的区别
  - onload 事件在页面从浏览器缓存中读取时不触发
  - onpageshow 事件在每次加载页面时触发
unload 当用户最终离开时会触发该事件

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<script>var output = "";function print() {document.getElementById("main").innerHTML += output;}function append(data) {output += data+" <br />";}document.addEventListener('readystatechange', function () {append("readyState : "+document.readyState);});document.addEventListener('DOMContentLoaded', function () {append("DOMContentLoaded");});window.onload = function () {append("window onload");print();};append("script executed");</script>
<div id="main"></div><iframe src="https://v3.bootcss.com/components/" height="35" onload="append('iframe onload')"></iframe><div>
<img src="https://i.loli.net/2021/09/21/jGoJ7puVWx3abct.png" onload="append('image onload')">
</div>
</body>
</html>

Web页面的生命周期函数相关推荐

WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload
简言理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义.如果不理解,在元素未加载就提前操作元素,则得不到想要的结果.而如果页面完全加载完成后,再进行操作,则又会影响用户体验. ...
uni-app单个页面的生命周期函数
除了整体应用的生命周期,每一个页面都有自己的生命周期我们先来看看代码 <script>export default {data() {return {title: 'Hello'}},o ...
Vue 页面如何利用生命周期函数监听用户预览时长
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...
vue所有页面刷新一次mounted(以及所有生命周期函数)执行两次的解决方法
刚开始我发现页面每刷新一次,接口都请求两次,我以为是因为axios发送OPTIONS预检请求,但是我发现两次请求都是正常的get或者是post请求,并且只有在页面刷新的时候请求才触发两次,点击查询或者 ...
微信小程序组件所在页面的生命周期
一什么是组件所在页面的生命周期有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期. 例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 ...
小程序的生命周期函数
小程序中的生命周期函数钩子函数声明周期: 声明周期是指一个小程序从创建到销毁的一系列过程小程序的两种生命周期在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 1.小 ...
ASP.NET Web 页面生命中的一天
ASP.NET Web 页面生命中的一天 Dino Esposito Wintellect 2003 年 8 月适用于: Microsoft® ASP.NET 摘要:了解为 ASP.NET Web ...
ASP.NET Web 页面生命历程中的一天
地址:https://msdn.microsoft.com/zh-cn/library/aa479007.aspx 发布日期 : 4/1/2004| 更新日期 : 4/1/2004 ASP.NET W ...
vue生命周期函数，页面加载事件
<script>export default {data() {return {};},methods: {toIndex() {//跳转页面this.$router.push(" ...
ZT Web Control 开发系列(一) 页面的生命周期
http://www.cnblogs.com/joeliu/category/143125.html Page是WebForm编程基本元素,它从TemplateControl派生,而TemplateC ...

Web页面的生命周期函数

Web页面的生命周期函数相关推荐

最新文章

热门文章