在浏览器地址栏输入URL地址,浏览器开始加载页面时,有如下几个过程javascript
一、浏览器开始解析HTML文档html
二、 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,而且没有async或defer属性,就暂停解析,开始执行脚本和CSS样式html5
三、 HTML文档解析完成java
四、 浏览器等待图片、样式表、字体文件等外部资源加载完成浏览器
在这其中,有两个阶段:dom
ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);async
load,表示页面包含图片等外部文件在内的全部元素都加载完成。测试
DOM Ready字体
严格来讲,ready并非DOM中的事件,只是由于在jQuery中,有ready()方法,它在页面HTML文档解析完成但图片等媒体文件加载完成以前执行。spa
使用jQuery插件通常都这么写
$(function(){ //do something alert('something finished!') });
其实这个就是jQuery ready()的简写,他等价于
$(document).ready(function(){ //do something alert('something finished!') })
这个jQuery ready()的方法就是DOM Ready ,他的做用就是,在DOM加载完成后,图片等外部文件加载以前,就能够对DOM进行操做。
在不使用jQuery的状况下,可使用DOMContentLoaded事件能够判断DOM的ready状态。
document.addEventListener('DOMContentLoaded', function () { //do something alert('something finished!') });
它表示在document节点上监听DOMContentLoaded事件,一旦document中的DOM完成加载就触发此事件。
IE8不支持DOMContentLoaded事件,所以在较低版本的浏览器中,可使用 readystatechange事件,效果是同样的。
document.onreadystatechange = function () { if (document.readyState == "interactive") { //do something alert('something finished!') }}
其中,document.readyState属性返回当前文档的状态,共有三种可能的值。
- loading:加载HTML代码阶段(还没有完成解析)
- interactive:加载外部资源阶段时
- complete:加载完成时
Dom Load
DOM在彻底加载完成以后会触发load事件,此时若是想作点事情的话,能够这么写
window.onload=function(){ //do something alert('something finished!') }
注意,不要写成document.onload,由于在大多数浏览器中,在document上监听load事件是无效的,应当在window上监听。
使用jQuery的写法
$(window).load(function(){ //do something alert('something finished!') })
这就是Dom Load,他的做用就是,在DOM以及其中的图片等其余外部文件所有加载完毕以后触发。
考虑一下下面的代码在执行时,会先弹出哪一个窗口。
<script> window.onload=function(){ alert('load finished!') } document.addEventListener('DOMContentLoaded',function(){ alert('ready finished!') }) </script> <body> <h1>这是一个 JavaScript 测试程序</h1> </body>
参考:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
https://www.w3.org/TR/html5/syntax.html#the-end
JavaScript标准参考教程http://javascript.ruanyifeng.com/dom/document.html