JavaScript:DOM加载事件,执行顺序和$(document).ready()

我刚刚意识到我缺乏关于浏览器正在加载的页面的基本知识。

假设我有这样的结构:

<head> <script src="jquery.js" type="text/javascript"></script> <script src="first.js" type="text/javascript"></script> </head> <body> ... <script type="text/javascript" id="middle"> // some more JS here... </script> ... <script src="last.js" type="text/javascript"></script> </body> 

以下是我的问题:

  1. 事情发生的顺序是什么? 首先是DOM,然后是JS执行,反之亦然,或者是同时执行(或者只要JS文件完成下载,不考虑DOM)? 我知道脚本是按顺序加载的。

  2. $(document).ready()在哪里适合? 在Firebug的Net选项卡中,我看到DOMContentLoaded事件和load事件。 $(document).ready()DOMContentLoaded事件触发时触发? 找不到任何具体的信息(大家只是提到“何时加载DOM”)。

  3. “什么时候装载DOM”是什么意思? 所有的HTML / JS已被浏览器下载和parsing? 或者只是HTML?

  4. 下面的情况是可能的:有一个$(document).ready()last.js中调用代码,但在last.js加载之前运行? 它最可能在哪里(在first.js或内联代码块中)? 我怎样才能防止这种情况?

我想要展示什么时候会发生什么,什么取决于什么(如果有的话)的大局。

Javascript被执行,因为它被看到。 通常情况下 ,浏览器一看到<script>标签就停止parsing页面,下载并运行脚本,然后继续前进。 这就是为什么通常build议将<script>标签放在底部的原因:所以用户在浏览器等待脚本下载时没有空白页面。

但是,从Firefox 3.5开始,脚本将在后台下载,而页面的其他部分则被渲染。 在脚本使用document.write或类似的非常事件中,Firefox将根据需要进行备份和重绘。 我不认为目前其他浏览器是这样做的,但是如果它即将到来,我不会感到惊讶,而且IE至less支持<script>标签中的defer属性,以延迟加载脚本直到页面加载。

DOMContentLoaded就是这样的:一旦DOM被加载,它就会触发。 也就是说,只要浏览器parsing了所有的HTML并在内部创build了一棵树。 它不会等待加载图像,CSS等。 DOM是您通常需要运行的任何Javascript所需的,所以不必等待其他资源。 不过,我相信只有Firefox支持DOMContentLoaded ; 在其他浏览器中, ready()只会将一个事件附加到常规的旧的onload

Javascript保证按照它在HTML中显示的顺序运行,所以只要确保你的函数在你试图附加到事件之前就已经定义好了。

  1. 所有的脚本都包含在html中,它们会在html被parsing的时候被载入。
  2. 这意味着所有的DOM对象已经加载,并且都包含脚本和CSS。 (图片可能还没有)。
  3. 见2。
  4. $(document).ready()只有在所有的脚本和dom对象被加载后才会调用,你应该没问题。

http://javascript.about.com/od/hintsandtips/a/exeorder.htm应该可以帮助你回答这个问题;

基本上是:首先加载所有的数据(html),然后把不在函数或者准备好的头部或者体内的代码(js)先执行。 从那里开始顺序执行脚本

值得注意的是,js优先于ie。 CSS加载 – 所以形成一个性能的angular度来看,你应该有在页面底部的JS。

所以@ 4:你不需要防止这种情况,因为first.js总是在last.js之前被读取/执行