HTML页面生命周期详解

前言

在使用vue的时代本次项目有个需求,就是需要在静态资源未加载时获取当前页面的访问路径,所以需要对html页面的生命周期要有所了解。本次讲讲HTML页面的生命周期事件,希望对大家有所帮助。如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻
 

一、HTML页面的生命周期

HTML 页面的生命周期包含三个重要事件:

  • DOMContentLoaded —— 浏览器已完全加载 HTML,并构建了 DOM 树,但样式表之类的外部资源可能尚未加载完成。

  • load —— 浏览器不仅加载完成了 HTML,还加载完成了所有外部资源:图片,样式等。

  • beforeunload —— 当用户正在离开页面时。

  • unload —— 用户几乎已经离开了

二、生命周期的作用:

  • DOMContentLoaded 事件 —— DOM 已经就绪,因此处理程序可以查找 DOM 节点,并初始化接口。

  • load 事件 —— 外部资源已加载完成,样式已被应用,图片大小也已知了。

  • beforeunload 事件 —— 用户正在离开:我们可以检查用户是否保存了更改,并询问他是否真的要离开。

  • unload 事件 —— 用户几乎已经离开了,但是我们仍然可以启动一些操作,例如发送统计数据。

三、DOMContentLoaded 和脚本

当浏览器处理一个 HTML 文档,并在文档中遇到

因此,DOMContentLoaded 肯定在下面的这些脚本执行结束之后发生。

此规则有两个例外:

  • 具有 async 特性(attribute)的脚本不会阻塞 DOMContentLoaded,稍后 我们会讲到。
  • 使用 document.createElement('script') 动态生成并添加到网页的脚本也不会阻塞 DOMContentLoaded。

四、DOMContentLoaded 和样式

外部样式表不会影响 DOM,因此 DOMContentLoaded 不会等待它们。

但这里有一个陷阱。如果在样式后面有一个脚本,那么该脚本必须等待样式表加载完成。原因是,脚本可能想要获取元素的坐标和其他与样式相关的属性。因此,它必须等待样式加载完成。

当 DOMContentLoaded 等待脚本时,它现在也在等待脚本前面的样式。

五、浏览器内建的自动填充

Firefox,Chrome 和 Opera 都会在 DOMContentLoaded 中自动填充表单。

例如,如果页面有一个带有登录名和密码的表单,并且浏览器记住了这些值,那么在 DOMContentLoaded 上,浏览器会尝试自动填充它们(如果得到了用户允许)。

因此,如果 DOMContentLoaded 被需要加载很长时间的脚本延迟触发,那么自动填充也会等待。你可能在某些网站上看到过(如果你使用浏览器自动填充)—— 登录名/密码字段不会立即自动填充,而是在页面被完全加载前会延迟填充。这实际上是 DOMContentLoaded 事件之前的延迟。

六、window.onload

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

七、window.onunload

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

有一个值得注意的特殊情况是发送分析数据。

假设我们收集有关页面使用情况的数据:鼠标点击,滚动,被查看的页面区域等。

自然地,当用户要离开的时候,我们希望通过 unload 事件将数据保存到我们的服务器上。

有一个特殊的 navigator.sendBeacon(url, data) 方法可以满足这种需求,详见规范  https://w3c.github.io/beacon/。

它在后台发送数据,转换到另外一个页面不会有延迟:浏览器离开页面,但仍然在执行 sendBeacon。

当 sendBeacon 请求完成时,浏览器可能已经离开了文档,所以就无法获取服务器响应(对于分析数据来说通常为空)。

还有一个 keep-alive 标志,该标志用于在 fetch 方法中为通用的网络请求执行此类“离开页面后”的请求。你可以在 Fetch API 一章中找到更多相关信息。

如果我们要取消跳转到另一页面的操作,在这里做不到。但是我们可以使用另一个事件 —— onbeforeunload。

八、window.onbeforeunload

如果访问者触发了离开页面的导航(navigation)或试图关闭窗口,beforeunload 处理程序将要求进行更多确认。

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

总结

页面生命周期事件:

  • 当 DOM 准备就绪时,document 上的 DOMContentLoaded 事件就会被触发。在这个阶段,我们可以将 JavaScript 应用于元素。

    • 诸如 <script>...</script> 或 <script src="..."></script> 之类的脚本会阻塞 DOMContentLoaded,浏览器将等待它们执行结束。
    • 图片和其他资源仍然可以继续被加载。
  • 当页面和所有资源都加载完成时,window 上的 load 事件就会被触发。我们很少使用它,因为通常无需等待那么长时间。

  • 当用户想要离开页面时,window 上的 beforeunload 事件就会被触发。如果我们取消这个事件,浏览器就会询问我们是否真的要离开(例如,我们有未保存的更改)。

  • 当用户最终离开时,window 上的 unload 事件就会被触发。在处理程序中,我们只能执行不涉及延迟或询问用户的简单操作。正是由于这个限制,它很少被使用。我们可以使用 navigator.sendBeacon 来发送网络请求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20230809在WIN10下使用python3批量将TXT文件转换为SRT文件

20230809在WIN10下使用python3批量将TXT文件转换为SRT文件 2023/8/9 17:30 由于喜欢看纪录片等外文视频&#xff0c;通过剪映/PR2023/AUTOSUB识别字幕之后&#xff0c;可以通过google翻译识别为简体中文的DOCX文档。 DOCX文档转换为TXT文档之后&#xff0c;还需要转换为SRT文档…

CentOS7安装MySQL8(RPM方式)

第一步&#xff1a;解压 tar -xvf mysql-8.0.34-1.el7.x86_64.rpm-bundle.tar -C /usr/local/java/mysql 第二步&#xff1a;按顺序安装rpm包 # rpm -ivh mysql-community-common-8.0.34-1.el7.x86_64.rpm# rpm -ivh mysql-community-client-plugins-8.0.34-1.el7.x86_64.rpm…

【PythonRS】植被显示增强(多光谱、正射、照片等)

很多时候我们需要某个区域的正射图&#xff0c;虽然正射图一般都运用了匀色的算法&#xff0c;整体色彩比较均衡。但如果研究区内有大量的植被&#xff0c;这个时候植被突出显示就很有必要了。所以今天给大家分享一下使用Python对多光谱、正射影像进行植被显示增强的算法。 一、…

【学习FreeRTOS】第2章——FreeRTOS基础知识

1.任务调度 1.1.任务调度简介 调度器就是使用相关的调度算法来决定当前需要执行的哪个任务FreeRTOS 一共支持三种任务调度方式&#xff1a; 抢占式调度&#xff1a;针对优先级不同的任务&#xff0c;每个任务都有一个优先级&#xff0c;优先级高的任务可以抢占优先级低的任务…

(3)原神角色数据分析-3

绘图类 在名为“WRITEPHOT.py”的文件中&#xff0c;定义如下绘图方式&#xff0c;则在主页面(app.py)文件中&#xff0c;可通过如下方式调用&#xff1a; from WRITEPHOTO import WriteScatter,WriteFunnel,WriteBarData,WritePie,WriteLineBar 代码如下&#xff1a; "…

【前端】CSS垂直居中的7种方法

文章目录 line-height绝对定位margin:autoflex绝对定位margin:负值定位transformvertical-align:middledisplay:table-cell思维导图 前文&#xff1a;【前端】CSS水平居中的6种方法_karshey的博客-CSDN博客 有很多相似的部分。 line-height 适用于单行的行内元素设置line-he…

N皇后算法的思路是什么?

N皇后问题是经典的回溯算法问题&#xff0c;其目标是在一个NxN的棋盘上放置N个皇后&#xff0c;使得它们彼此之间不能互相攻击&#xff0c;即任意两个皇后都不在同一行、同一列或同一斜线上。 算法的思路如下&#xff1a; 使用递归函数来解决问题。递归函数的参数通常包括当前…

模仿火星科技 基于cesium+角度测量+高度测量+可编辑

1. 创建提示窗&#xff1a; 启动Cesium应用&#xff0c;地图场景将打开&#xff0c;欢迎您进入编辑模式。 在屏幕的一角&#xff0c;一个友好的提示窗将呈现&#xff0c;随着您的操作&#xff0c;它会为您提供有用的信息和指导。 2. 绘制面积&#xff1a; 轻轻点击鼠标左键&a…

Spring之Aop切面---日志收集(环绕处理、前置处理方式)--使用/教程/实例

Spring之Aop切面---日志收集&#xff08;环绕处理、前置处理方式&#xff09;--使用/教程/实例 简介系统登录日志类LoginLogEntity .java 一、环绕处理方式1、自定义注解类LoginLogAop.class2、切面处理类LogoutLogAspect.java 二、前置处理方式&#xff1a;1、自定义注解类Log…

MySQL之 show profile 相关总结

MySQL之 show profile 相关总结 MySQL官网show profile介绍&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/show-profile.html 1. 简介 show profile 和 show profiles 命令用于展示SQL语句的资源使用情况&#xff0c;包括CPU的使用&#xff0c;CPU上下文切换&#xf…

【实战】 九、深入React 状态管理与Redux机制(五) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(二十)

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…

Docker 数据管理

文章目录 前言1、Dcoker 文件体系2、volume挂载案例2.1、挂载运行一个容器实例方法1方法2 3、volumes-from 案例4、备份/恢复数据卷5、删除数据卷 前言 为什么要有数据管理&#xff1f; 因为&#xff1a; Docker 是不提供持久化的 &#xff0c;容器是不稳定的&#xff1b;一个…

mac ssh连接另一台window虚拟机vm

vmware配置端口映射 编辑(E) > 虚拟网络编辑器(N)... > NAT设置(S)... window防火墙&#xff0c;入站规则添加5555端口 控制面板 > 系统和安全 > Windows 防火墙>高级设置>入站规则>新建规则... tips windows查看端口命令&#xff1a;netstat -ano | f…

【从零学习python 】14.Python字符串常见操作(二)

文章目录 count替换内容分隔splitrsplitsplitlinespartitionrpartition 修改大小写capitalizetitlelowerupper 空格处理1. ljust2. rjust3. center4. lstrip5. rstrip6. strip 字符串拼接字符串运算符进阶案例 count 返回 str 在 start 和 end 之间在 mystr 里面出现的次数。 …

EthereumArbitrumOptimism节点搭建

Ethereum节点搭建 Ethereum节点搭建可基于源码或基于docker。这里介绍基于docker的方式搭建。 拉取镜像 docker pull ethereum/client-go 建议将镜像源配置为阿里云的镜像源 启动容器 docker run -itd -p 8545:8545 -p 30303:30303 --name eth -v /data/eth:/root/.ethere…

java-IDEA MAVEN查看依赖树,解决jar包重复和冲突

如果这里面的依赖关系有红线,就说明有包冲突,一般都是版本不一致,可以在idea里下一个插件Maven Helper,点击install并重启IDEA 打开pom.xml文件&#xff0c;在下方会出现Dependency Analyzer&#xff0c;选择它会出现重复依赖列表&#xff0c;选择对应的依赖&#xff0c;右键红…

BI技巧丨利用Index计算半累计

在实际的业务场景中&#xff0c;特别是财务模块和库存管理模块&#xff0c;经常需要我们针对每个月的期初期末进行相关指标计算&#xff0c;这也是我们之前曾经提到的Calculate基础应用——半累计计算。 现在我们也可以通过微软新推出的Index开窗函数来解决这一问题。 INDEX函…

Mapbox加载天地图CGCS2000矢量瓦片地图

1.背景 最近在做天地图的项目&#xff0c;要基于MapBox添加CGCS2000矢量切片数据&#xff0c;但是 Mapbox 只支持web 墨卡托&#xff08;3857&#xff09;坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码&#xff0c;支持CGCS2000的切片数据加载&#xff0c;并且修改…

dji uav建图导航系列(一)建图

文章目录 1、uav + rplidir雷达1.2、思岚激光雷达1.3、dji uav的launch文件2、cartographer激光建图2.1、启动文件2.2、config修改2.3、建图过程3、融合odom+laser建图1、uav + rplidir雷达 思岚激光雷达frame为base_laser_link, 无人机frame为base_footprint。 文件uav_lid…

【Python】同步、异步、堵塞、非堵塞、回调

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 一、Python中的同步异步二、Python中的堵塞非堵塞三、Python中的回调四、异步编程 一、Python中的同步异步 在 Python 中&#xff0c;同步和…