简言

理解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 (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的生命周期和程序的生命周期

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

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

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

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

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

  6. Web应用的生命周期(客户端)

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

  7. 来扯点ionic3[3] 页面的生命周期事件，也就是凡间所说的钩子

    首先要做一个诚挚的道歉,作为大四狗,因为升学的事情,断更两个月,所以要感谢各位仁慈的读者没有脱粉(好像也就50个粉丝).这一节,我们延续上一节制作的页面,来讨论声明周期钩子的事情. 以我的经验来看,多 ...

  8. 与众不同 windows phone (27) - Feature（特性）之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏

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

  9. JSP页面的生命周期

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

随机推荐

  1. 1.(python)__new__与__init__

    1.来比较一下__new__与__init__: (1)__new__在初始化实例前调用,__init__在初始化实例之后调用,用来初始化实例的一些属性或者做一些初始操作 # -*- coding: ...

  2. Java的栈和队列

    package com.ipmotor.sm.db;import java.util.LinkedList;import java.util.Queue;import java.util.Stack; ...

  3. 一次线上tomcat应用请求阻塞的排查经过

    今天早上,收到一个报警,有个服务器的http往返时延飙升,同时曝出大量404,很是折腾了一番,特记录下思考和排查经过. 1.这是单纯的时延增大,还是有什么其他情况还未掌握? 因为不知道是只有时延变大而 ...

  4. RocketMQ-广播模式消费

    Rocketmq 消费者默认是集群的方式消费的,消费者还可以用广播的模式进行消费.广播模式消费就是所有订阅同一个主题的消费者都会收到消息.代码实现上其实很简单,就是在消费端添加 consumer.se ...

  5. RocketMQ-Tomcat中部署rocketmq-console

    1. https://github.com/didapinchegit/rocket-console 在github上下载rocketmq-consoler的源码, 用mvn clean packag ...

  6. Mysql索引分析：适合建索引？不适合建索引？【转】

    数据库建立索引常用的规则如下: 1.表的主键.外键必须有索引: 2.数据量超过300的表应该有索引: 3.经常与其他表进行连接的表,在连接字段上应该建立索引: 4.经常出现在Where子句中的字段,特 ...

  7. linux_发邮件

    如何通过linux发邮件? 邮箱配置文件: /etc/mail.rc 1. 邮箱文件配置 vim /etc/mail.rc # 添加一下数据 set from=beimen@163.com smtp= ...

  8. Python初识 - day5

    一.装饰器(decorator) 1.定义:本质是函数(装饰其它函数),就是为了其它函数添加附加功能. 2.原则:一是不能修改被装饰函数的源代码:二是不能修改被装饰函数的调用方式. 3.装饰器包含的知 ...

  9. BSA Network Shell系列-nexec | runcmd | runscript | scriptutil的异同

    说明下nexec.runcmd.runscript.scriptutil的异同 相同点: 四者都可以在远程机器执行命令.或者调用脚本. 不同点: nexec支持NSH命令,可以执行远程机的本地命令(非 ...

  10. Java并发编程的艺术读书笔记(2)-并发编程模型

    title: Java并发编程的艺术读书笔记(2)-并发编程模型 date: 2017-05-05 23:37:20 tags: ['多线程','并发'] categories: 读书笔记 --- 1 ...