页面生命周期:DOMContentLoaded, load, beforeunload, unload
页面生命周期:DOMContentLoaded, load, beforeunload, unload
原文地址:http://javascript.info/onload...
HTML页面的生命周期有以下三个重要事件:
DOMContentLoaded
— 浏览器已经完全加载了HTML,DOM树已经构建完毕,但是像是<img>
和样式表等外部资源可能并没有下载完毕。load
— 浏览器已经加载了所有的资源(图像,样式表等)。beforeunload/unload
-- 当用户离开页面的时候触发。
每个事件都有特定的用途
DOMContentLoaded
-- DOM加载完毕,所以js可以访问所有DOM节点,初始化界面。load
-- 附加资源已经加载完毕,可以在此事件触发时获得图像的大小(如果没有被在HTML/CSS中指定)beforeunload/unload
-- 用户正在离开页面:可以询问用户是否保存了更改以及是否确定要离开页面。
来看一下每个事件的细节。
DOMContentLoaded
DOMContentLoaded
由 document
对象触发。
我们使用 addEventListener
来监听它:
document.addEventListener("DOMContentLoaded", ready);
举个例子
<script>function ready() {alert('DOM is ready');// image is not yet loaded (unless was cached), so the size is 0x0alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);}document.addEventListener("DOMContentLoaded", ready);
</script><img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
在这个例子中 DOMContentLoaded
在document加载完成后就被触发,无需等待其他资源的载入,所以alert
输出的图像的大小为0。
这么看来DOMContentLoaded
似乎很简单,DOM树构建完毕之后就运行该事件,不过其实存在一些陷阱。
DOMContentLoaded 和脚本
当浏览器在解析HTML页面时遇到了 <script>...</script>
标签,将无法继续构建DOM树(译注:UI渲染线程与JS引擎是互斥的,当JS引擎执行时UI线程会被挂起),必须立即执行脚本。所以 DOMContentLoaded
有可能在所有脚本执行完毕后触发。
外部脚本(带src
的)的加载和解析也会暂停DOM树构建,所以 DOMContentLoaded
也会等待外部脚本。
不过有两个例外是带async
和defer
的外部脚本,他们告诉浏览器继续解析而不需要等待脚本的执行,所以用户可以在脚本加载完成前可以看到页面,有较好的用户体验。
async
和defer
属性仅仅对外部脚本起作用,并且他们在src
不存在时会被自动忽略。
它们都告诉浏览器继续处理页面上的内容,而在后台加载脚本,然后在脚本加载完毕后再执行。所以脚本不会阻塞DOM树的构建和页面的渲染。
(译注:其实这里是不对的,带有async
和defer
的脚本的下载是和HTML的下载与解析是异步的,但是js的执行一定是和UI线程是互斥的,像下面这张图所示,async
在下载完毕后的执行会阻塞HTML的解析)
他们有两处不同:
async
|
defer
|
|
---|---|---|
顺序 |
带有async 的脚本是优先执行先加载完的脚本,他们在页面中的顺序并不影响他们执行的顺序。
|
带有defer 的脚本按照他们在页面中出现的顺序依次执行。
|
DOMContentLoaded
|
带有async 的脚本也许会在页面没有完全下载完之前就加载,这种情况会在脚本很小或本缓存,并且页面很大的情况下发生。
|
带有defer 的脚本会在页面加载和解析完毕后执行,刚好在 DOMContentLoaded 之前执行。
|
所以async
用在那些完全不依赖其他脚本的脚本上。
### DOMContentLoaded and stylesExternal style sheets don't affect DOM, and so `DOMContentLoaded` does not wait for them.
外部样式表并不会影响DOM,所以`DOMContentLoaded`并不会被他们阻塞。
But there's a pitfall: if we have a script after the style, then that script must wait for the stylesheet to execute:
不过仍然有一个陷阱:如果在样式后面有一个内联脚本,那么脚本必须等待样式先加载完。<link type="text/css" rel="stylesheet" href="style.css">
<script>// the script doesn't not execute until the stylesheet is loaded// 脚本直到样式表加载完毕后才会执行。alert(getComputedStyle(document.body).marginTop);
</script>
发生这种事的原因是脚本也许会像上面的例子中所示,去得到一些元素的坐标或者基于样式的属性。所以他们自然要等到样式加载完毕才可以执行。
DOMContentLoaded
需要等待脚本的执行,脚本又需要等待样式的加载。
浏览器的自动补全
Firefox, Chrome和Opera会在DOMContentLoaded
执行时自动补全表单。
例如,如果页面有登录的界面,浏览器记住了该页面的用户名和密码,那么在 DOMContentLoaded
运行的时候浏览器会试图自动补全表单(如果用户设置允许)。
所以如果DOMContentLoaded
被一个需要长时间执行的脚本阻塞,那么自动补全也会等待。你也许见过某些网站(如果你的浏览器开启了自动补全)—— 浏览器并不会立刻补全登录项,而是等到整个页面加载完毕后才填充。这就是因为在等待DOMContentLoaded
事件。
使用带async
和defer
的脚本的一个好处就是,他们不会阻塞DOMContentLoaded
和浏览器自动补全。(译注:其实执行还是会阻塞的)
window.onload
window
对象上的onload
事件在所有文件包括样式表,图片和其他资源下载完毕后触发。
下面的例子正确检测了图片的大小,因为window.onload
会等待所有图片的加载。
<script>window.onload = function() {alert('Page loaded');// image is loaded at this timealert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);};
</script><img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
window.onunload
用户离开页面的时候,window
对象上的unload
事件会被触发,我们可以做一些不存在延迟的事情,比如关闭弹出的窗口,可是我们无法阻止用户转移到另一个页面上。
所以我们需要使用另一个事件 — onbeforeunload
。
window.onbeforeunload
如果用户即将离开页面或者关闭窗口时,beforeunload
事件将会被触发以进行额外的确认。
浏览器将显示返回的字符串,举个例子:
window.onbeforeunload = function() {return "There are unsaved changes. Leave now?";
};
有些浏览器像Chrome和火狐会忽略返回的字符串取而代之显示浏览器自身的文本,这是为了安全考虑,来保证用户不受到错误信息的误导。
readyState
如果我们在整个页面加载完毕后设置DOMContentLoaded
会发生什么呢?
啥也没有,DOMContentLoaded
不会被触发。
有一些情况我们无法确定页面上是否已经加载完毕,比如一个带有async
的外部脚本的加载和执行是异步的(注:执行并不是异步的-_-)。在不同的网络状况下,脚本有可能是在页面加载完毕后执行也有可能是在页面加载完毕前执行,我们无法确定。所以我们需要知道页面加载的状况。
document.readyState
属性给了我们加载的信息,有三个可能的值:
loading
加载 - document仍在加载。interactive
互动 - 文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。complete
- 文档和所有子资源已完成加载。状态表示load
事件即将被触发。
所以我们可以检查 document.readyState
的状态,如果没有就绪可以选择挂载事件,如果已经就绪了就可以直接立即执行。
像这样:
function work() { /*...*/ }if (document.readyState == 'loading') {document.addEventListener('DOMContentLoaded', work);
} else {work();
}
每当文档的加载状态改变的时候就有一个readystatechange
事件被触发,所以我们可以打印所有的状态。
// current state
console.log(document.readyState);// print state changes
document.addEventListener('readystatechange', () => console.log(document.readyState));
readystatechange
是追踪页面加载的一个可选的方法,很早之前就已经出现了。不过现在很少被使用了,为了保持完整性还是介绍一下它。
readystatechange
的在各个事件中的执行顺序又是如何呢?
<script>function log(text) { /* output the time and message */ }log('initial readyState:' + document.readyState);document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));window.onload = () => log('window onload');
</script><iframe src="iframe.html" onload="log('iframe onload')"></iframe><img src="http://en.js.cx/clipart/train.gif" id="img">
<script>img.onload = () => log('img onload');
</script>
输出如下:
- [1] initial readyState:loading
- [2] readyState:interactive
- [2] DOMContentLoaded
- [3] iframe onload
- [4] readyState:complete
- [4] img onload
- [4] window onload
方括号中的数字表示他们发生的时间,真实的发生时间会更晚一点,不过相同数字的时间可以认为是在同一时刻被按顺序触发(误差在几毫秒之内)
document.readyState
在DOMContentLoaded
前一刻变为interactive
,这两个事件可以认为是同时发生。document.readyState
在所有资源加载完毕后(包括iframe
和img
)变成complete
,我们可以看到complete
、img.onload
和window.onload
几乎同时发生,区别就是window.onload
在所有其他的load
事件之后执行。
总结
页面事件的生命周期:
DOMContentLoaded
事件在DOM树构建完毕后被触发,我们可以在这个阶段使用js去访问元素。async
和defer
的脚本可能还没有执行。- 图片及其他资源文件可能还在下载中。
load
事件在页面所有资源被加载完毕后触发,通常我们不会用到这个事件,因为我们不需要等那么久。beforeunload
在用户即将离开页面时触发,它返回一个字符串,浏览器会向用户展示并询问这个字符串以确定是否离开。unload
在用户已经离开时触发,我们在这个阶段仅可以做一些没有延迟的操作,由于种种限制,很少被使用。document.readyState
表征页面的加载状态,可以在readystatechange
中追踪页面的变化状态:loading
— 页面正在加载中。interactive
-- 页面解析完毕,时间上和DOMContentLoaded
同时发生,不过顺序在它之前。complete
-- 页面上的资源都已加载完毕,时间上和window.onload
同时发生,不过顺序在他之前。
页面生命周期:DOMContentLoaded, load, beforeunload, unload相关推荐
- WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload
简言 理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义.如果不理解,在元素未加载就提前操作元素,则得不到想要的结果.而如果页面完全加载完成后,再进行操作,则又会影响用户体验. ...
- 页面生命周期:DOMContentLoaded, load, beforeunload, unload解析
HTML页面的生命周期有以下三个重要事件: DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是像是 <img> 和样式表等外部资源可能并没 ...
- alert 返回页面 刷新_页面生命周期:DOMContentLoaded,load,beforeunload,unload
DOMContentLoaded,load,beforeunload,unload HTML 页面的生命周期包含三个重要事件: DOMContentLoaded -- 浏览器已完全加载 HTML,并构 ...
- 页面生命周期:DOMContentLoaded,load,beforeunload,unload
DOMContentLoaded,load,beforeunload,unload HTML 页面的生命周期包含三个重要事件: DOMContentLoaded -- 浏览器已完全加载 HTML,并构 ...
- 【基础篇1】JavaScript页面生命周期
各位看官老爷,是否在框架横行的时代,忽略了原生js的方法.今天给大家带来一期html页面生命周期的分享. 页面生命周期方法 HTML 页面的生命周期包含四个重要事件: 事件 说明 应用场景 DOMCo ...
- [转]ASP.NET页面生命周期描述
ASP.NET页面生命周期描述 vigorID:Vigorcsdn 在以前写个一篇关于ASP.NET页面生命周期的草稿,最近又看了看ASP.NET,做个补充,看看页面初始过程到底是怎么样的 下面是AS ...
- ASP.NET页面生命周期描述
附一篇文章:http://blog.csdn.net/Vigorcsdn/article/details/572552 在以前写个一篇关于ASP.NET页面生命周期的草稿,最近又看了看ASP.NET, ...
- ASP.NET页面揭秘之页面生命周期
首先简单介绍下Page类. 在.NET Framework中,Page类提供了ASP.NET应用程序从.aspx文件开始创建的所有对象的基本行为.Page类在System.Web.UI命名空间中定义, ...
- 记不住ASP.NET页面生命周期的苦恼
介绍 对于ASP.NET开发者,理解ASP.NET的页面生命周期是非常重要的.主要是为了搞明白在哪里放置特定的方法和在何时设置各种页面属性.但是记忆和理解页面生命周期里提供的事件处理方法(method ...
最新文章
- javascript实现小九九乘法口诀
- C语言再学习-- assert 断言宏
- 计算机组成原理CRC相关运算,计算机专业基础综合计算机组成原理(数据的表示和运算)-试卷1...
- ArcGIS制图表达Representation-制图表达原理
- Windows核心编程_更改当前工作目录
- 激活windows 7 RTM方法
- eclipse使用配置教程
- java实现中文大写金额转小写数字
- 项目经理应该具备的四种能力
- 唐太宗李世民14个儿子的可悲结局[高清组图]
- 桌面计算机未响应,电脑软件总是未响应 电脑应用程序经常无响应,
- Ubuntu上安装博通无线网卡驱动
- android 强制关闭键盘,Android关闭输入软键盘无效的问题
- 【Java基础】· Java基本语法:程序流程控制习题总结
- 创业的路,每一天都是劫后余生,怎么走?
- 基于stm32f10x的超声波模块HC-SR04的测距示例,并用串口将数据打印出来
- 20级网络学生---循环
- 阿里巴巴反购雅虎胜算几何?
- 字符串中的 ↵ 回车符替换
- Alpha值和Delta是什么东西?
热门文章
- android安装python opencv_MacLinux环境在Android Studio中安装OpenCV
- Deep Residual Learning for Image Recognition个人有感
- 计算机算法设计与分析之----- 递归与分治策略
- java amp amp 怎么用,java中amp;与amp;amp;的区别
- 【rbd 删除失败】rbd: error: image still has watchers
- 【java】简单的方式实现文本文件的读写
- java Jconsole调优
- 笔记-项目范围管理-确认范围与控制范围的区别
- 笔记-项目管理基础知识-项目目标
- 从个人到团队:思维转变是关键