你的位置:首页 > 软件开发 > Java > 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

发布时间:2016-04-05 17:00:14
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关的知识点:(1)《浏览器环境下JavaS ...

浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关的知识点:

(1)《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》主要针对向页面引入JavaScript代码的不同方法,研究了其在代码执行顺序方面的问题,特别重点研究了document.write这种方式引入JavaScript脚本时的执行顺序问题。

(2)《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》讲解了两个影响脚本加载与执行顺序的<script>标签元素特性:defer和async

(3)《浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入》又通过实验探究了动态脚本技术和Ajax脚本注入技术的代码执顺序问题,并与defer属性的使用做了结合的比较

本篇文章继续浏览器环境下JavaScript脚本加载与执行探析的话题,重点讲解DOMContentLoaded这一在实际编程中经常使用的事件。

1. DOMContentLoaded?

相信有经验的前端开发者对DOMContentLoaded事件已经很熟悉了,MDN的解释可以很清楚地表达这个事件的意思:

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

重点阅读加粗的部分,也就是说,DOMContentLoaded是在HTML文档完全加载和解析结束时触发,而不会等待样式表、图片和子框架的加载。在实际编程中,我们通常都有这样一种需求,“文档加载结束时执行某些JS代码”,较早的时候,可能会使用window.onload=function(){}这样的方法,但是onload需要等待图片、样式表等资源加载结束才会触发,如果我们的网页包含较多的这些资源,那么用户必须等待这些资源加载结束后才能与页面进行交互,明显是有违用户体验的,这一点相信前端开发者也都比较熟悉了。

DOMContendLoaded虽好,但是兼容性还是有些问题:

浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

可以看到,IE<=8是不支持DOMContentLoaded的,那么肯定会有相应的兼容方案,我们这里讲解jQuery的兼容方法

2. jQuery中的DOMContentLoaded兼容(以jQuery1.7.1为例)

2.1 jQuery.prototype.ready方法

我们都知道,在jQuery中,绑定DOMContentLoaded事件有以下两种方法:

(1)$(document).ready(function(){//要执行的代码})

(2)$(function(){//要执行的代码})

这两种写法是等价的,我们通过源码来看一下,直接写$(function(){})时,代码是如何运行的:

在jQuery1.7.1的196行:

1     // HANDLE: $(function)2     // Shortcut for document ready3     } else if ( jQuery.isFunction( selector ) ) {4       return rootjQuery.ready( selector );5     }

原标题:浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。