DOM加载过程当中ready和load的区别

时间 2019-11-14

标签 dom 加载过程当中 ready load 区别栏目 HTML 繁體版

原文原文链接

在浏览器地址栏输入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