WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

时间：2022-09-21 10:14:33

简言

理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解，在元素未加载就提前操作元素，则得不到想要的结果。而如果页面完全加载完成后，再进行操作，则又会影响用户体验。

一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行。采用如下形式：

document.addEventListener('DOMContentLoaded', function () {

    alert("DOMContentLoaded");

});

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

说明

理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。用过JQuery都知道，我们大多将代码写在$(document).ready()中，当文档加载完成后，就会执行该函数。如果不这样做，在文档未加载完成之前操作DOM，就得不到想要的结果。

演示程序

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>42度空间-Html页面的生命周期,DOMContentLoaded,load,beforeunload,unload</title>

</head>

<body>

<div id="main"></div>

<iframe src="http://res.42du.cn/static/html/iframe.html" height="35" onload="append('iframe onload')"></iframe>

<div><img src="http://res.42du.cn/up/201802/cbbtiga6.jpg?cache=none" onload="append('image onload')"></div>

<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>

</body>

</html>

从演示程序运行结果，得出一般浏览器的加载顺序如下：

  • script executed
  • readyState : interactive
  • DOMContentLoaded
  • image onload
  • iframe onload
  • readyState : complete
  • window onload

从以上可以看出同步的Script总是先于其它事件执行，而window.onload事件总是最后执行。而image onload和iframe onload的先后顺序并不确定。

结论

关于WEB页面的生命周期，一般你应该记住如下这些观点，一些观点从运行结果中也可以得出。

  • 同步的JavaScript脚本最先执行，它先于DOMContentLoaded事件执行。

  • 当DOM准备就绪时，DOMContentLoaded事件在document上触发。 我们可以在这个阶段利用JavaScript来操作DOM元素。

    • 所有脚本都执行完毕，除了那些外部使用异步（async）或延迟（defer）加载的脚本
    • 图片和其他资源可能仍在载入过程中。

  • window上的onload事件，在页面加载完所有资源后触发。 我们很少使用它，因为通常的操作不用等到最后才执行。

  • window上的beforeunload事件，该事件在用户准备离开页面，在unload事件之前触发。 如果beforeunload返回一个字符串，浏览器会给出 用户是否真的想离开的提示。

  • window上的unload事件，当用户最终离开时会触发该事件。在unload的事件处理程序中，我们只能做简单的事情，不涉及延迟或询问用户。 由于这个限制，它很少使用。

  • document.readyState表示文档的当前状态，可以在readystatechange事件中跟踪文档状态的变更。

    • loading – 文档正在载入。
    • interactive – document已经解析完毕时触发，几乎与DOMContentLoaded同时发生，但在DOMContentLoaded事件之前触发。
    • complete – 文档和资源加载完成时触发，几乎与window.onload同时发生，但在onload事件之前触发。

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

42度空间-在线演示程序

WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload的更多相关文章

  1. web页面的生命周期

    1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...

  2. 一个Web页面的生命周期 ，面试常常被问到

    常规页生命周期阶段 一般来说,页要经历下表概述的各个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页.有关更多信息,请参见 ASP.NET 应用程序生命周期概述. ...

  3. 重新想象 Windows 8 Store Apps &lpar;70&rpar; - 其它&colon; 文件压缩和解压缩&comma; 与 Windows 商店相关的操作&comma; app 与 web&comma; 几个 Core 的应用&comma; 页面的生命周期和程序的生命周期

    [源码下载] 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的 ...

  4. 【Framework】深入研究Asp&period;net页面的生命周期

    介绍 Asp.net是微软.Net战略的一个组成部分.它相对以前的Asp有了很大的发展,引入了许多的新机制.本文就Asp.net页面的生命周期向大家做一个初步的介绍,以期能起到指导大家更好.更灵活地操 ...

  5. ASP&period;NET一个页面的生命周期

    在学习ASP.NET页面生命周期前,需要先了解之前的ASP.NET的基本运行机制,在理解ASP.NET基本运行机制原理后,下面将介绍ASP.NET的生命周期中,页面从创建到处理结束的过程中ASP.NE ...

  6. Web应用的生命周期&lpar;客户端&rpar;

    典型的一个Web应用的生命周期从用户在浏览器输入一串URL,或者单击一个链接开始(就是访问一个页面).而这个生命周期的结束就是我们关闭这个页面. 响应流程: 用户输入一个 URL(生命周期开始) 客户 ...

  7. 与众不同 windows phone &lpar;27&rpar; - Feature（特性）之搜索的可扩展性&comma; 程序的生命周期和页面的生命周期&comma; 页面导航&comma; 系统状态栏

    原文:与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏 [索引页][源码下载] 与众不同 wind ...

  8. JSP页面的生命周期

    JSP页面的生命周期:我们假设要访问的jsp页面是index.jsp.首先,用户发出请求index.jsp:服务器会判断是否是第一次请求:如果是的话,JSP引擎会把该JSP文件转换成为一个Servle ...

  9. 「小程序JAVA实战」 小程序私有页面的生命周期以及导航（10）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-10/ 之前讲了小程序全局的生命周期,今天咱们说说单个页面的生命周期!源码:https://gith ...

随机推荐

  1. EXPLAINING WHAT ACTION AND FUNC ARE

    http://simpleprogrammer.com/2010/09/24/explaining-what-action-and-func-are/ Explaining What Action A ...

  2. HDU 1753 大明A&plus;B（字符串模拟，简单题）

    简单题,但要考虑一些细节: 前导0不要,后导0不要,小数长度不一样时,有进位时,逆置处理输出 然后处理起来就比较麻烦了. 题目链接 我的代码纯模拟,把小数点前后分开来处理,写的很繁杂,纯当纪念——可怜 ...

  3. Xcode8&period;3 添加iOS10&period;3以下旧版本模拟器

    问题起源 由于手边项目需要适配到iOS7, 但是手边的测试机都被更新到最新版本,所以有些潜在的bug,更不发现不了.最近就是有个用户提出一个bug,而且是致命的,app直接闪退.app闪退,最常见的无 ...

  4. Zookeer-- 上搭建 hbase

    一.HBase的相关概念1.HBase的概念:大量数据进行随机近实时读写时使用Hbase.2.HBase是一个模仿Gootable's Bigtable的,开源的.分布式的.版本化的非关系型数据库.3 ...

  5. 芝麻HTTP：如何寻找爬虫入口

    寻找爬虫入口 1 .本次任务的入口 这个爬虫的更好的入口就是我们平常使用的搜索引擎.搜索引擎虽然有很多种,但是其实都是在干一件事,收录网页,处理,然后提供搜索服务.在平时使用的过程中,我们通常都是直接 ...

  6. 中断下半部处理之tasklet

    1.tasklet概述 下半部和退后执行的工作,软中断的使用只在那些执行频率很高和连续性要求很高的情况下才需要.在大多数情况下,为了控制一个寻常的硬件设备,tasklet机制都是实现自己下半部的最佳选 ...

  7. Maven下载私服上的jar包

    1.配置M2_HOME/conf/settions.xml <server> <id>maven-public</id> <username>admin ...

  8. lua的文件管理

    lua没有自己的文件管理 只有读取和写入文件,但是可以通过调用lfs(LuaFileSystem),lfs是一个 用于lua进行文件访问的库,支持lua5.1和lua5.2,并且跨平台 lfs的使用: ...

  9. 【Python编程：从入门到实践】chapter6 字典

    chapter6 字典 6.1 一个简单的字典 6.2 使用字典 6.2.1 访问字典中的值 6.2.2 添加键值对 6.2.3 先创建一个空字典 6.2.4 修改字典中的值 6.2.5 删除键值对 ...

  10. 移动端开发之px，em和rem详解

    px:表示的是绝对的像素值,1px就是1像素大小 em:关于em,网上有资料说是关于父元素的,但是其实个人感觉这种说法是不对的,其实em的大小是根据自身的font-size确定的,而只是正常的情况下子 ...

相关文章