JavaScript中DOMContentLoaded与onload的区别(JQ中ready和load的区别)

DOMContentLoaded与load的区别

    在js中DOMContentLoaded方法是在HTML文档被完全的加载和解析之后才会触发的事件,他并不需要等到(样式表/图像/子框架)加载完成之后再进行。

    在看load事件(onload事件),用于检测一个加载完全的页面。

    如果通过上面两句话让你觉得很乱,那我们应该讲一讲DOM完整的解析过程:

1.  解析HTML结构。

2.  加载外部脚本和样式表文件。

3.  解析并执行脚本代码。//js之类的

4.  DOM树构建完成。//DOMContentLoaded

5.  加载图片等外部文件。

6.  页面加载完毕。//load

在第4步的时候DOMContentLoaded事件会被触发。

在第6步的时候load事件会被触发。

证明方法:(把下面代码打印到控制台会发现,他们执行的先后顺序是DOMContentLoaded先被触发)

console.log('传奇狗:观察脚本加载的顺序')

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

        console.log('DOMContentLoaded回调') // 不兼容老的浏览器,兼容写法见[jQuery中ready与load事件] ,原理看下文

}, false);

window.addEventListener("load", function() {

        console.log('load事件回调')

}, false);

控制台效果


我们在证实一下他和第三步(解析并执行脚本代码)的关系:

document.addEventListener("DOMContentLoaded", function(event) {

        console.log("DOM fully loaded and parsed");  

        //这个简单的DOMContentLoaded很快就被执行了

});

document.addEventListener("DOMContentLoaded", function(event) {

        console.log("DOM fully loaded and parsed");

});

for(var i=0; i<1000000000; i++){

        //循环 1000000000 次,为了使这个同步脚本将延迟DOM的解析。

        //所以DOMContentLoaded事件等待了一段时间(解析完所有js)才会被执行。

}



DOMContentLoaded兼容性

    document.ready的核心是DOMContentLoaded事件,firefox、chrome、opera、safari、ie9+都可以使用addEventListener(‘DOMContentLoaded',fn,false)进行事件绑定。

    而ie6~8不支持DOMContentLoaded事件,所以要针对ie6~8做兼容性处理。

1.在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕。

2.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态。

场景1:

    我们在写js代码的时候,一般都会添加window.onload事件,主要是为了在DOM加载完后可以使用getElementById,getElementsByTagName等方法选取DOM元素进行操作,但是window.load会等到加载完DOM、脚本、CSS,最后加载完图片甚至是iframe中的所有资源才会触发,很多时候网页的图片较多较大,要等最后图片这个耗时大户加载完才执行js明显有些太迟了,很多时候都会影响用户体验。

场景2:

    如果DOMContentLoaded里面的事件太多,也会影响到页面不能及早渲染出来,当然这样的情况不会太多。

    所以,我们使用window.onload事件还是DOMContentLoaded要针对情况,不要盲目使用,影响用户体验。



JQ中ready和load的区别

    我想,通过上面对两个事件的介绍,大家很容易就明白了在JQ中的ready和load的区别。

Js原生的写法

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

        // ...代码...

}, false);

window.addEventListener("load", function() {

        // ...代码...

}, false);

JQ的写法

//DOMContentLoaded

$(document).ready(function() {

        // ...代码...

});

//load

$(document).load(function() {

        // ...代码...

});

    说白了,ready就是用DOMContentLoaded来实现功能的,而load使用onload来实现的,他们执行的先后顺序不同,JQ中ready方法比load方法执行顺序靠前,而且load需要等待页面元素加载完毕才会执行。嘎嘎嘎~~~下课!

推荐阅读更多精彩内容