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> 以下是我的问题：
-
事情发生的顺序是什么？ 首先是DOM，然后是JS执行，反之亦然，或者是同时执行（或者只要JS文件完成下载，不考虑DOM）？ 我知道脚本是按顺序加载的。
-
$(document).ready()在哪里适合？ 在Firebug的Net选项卡中，我看到DOMContentLoaded事件和load事件。$(document).ready()在DOMContentLoaded事件触发时触发？ 找不到任何具体的信息（大家只是提到“何时加载DOM”）。 -
“什么时候装载DOM”是什么意思？ 所有的HTML / JS已被浏览器下载和parsing？ 或者只是HTML？
-
下面的情况是可能的：有一个
$(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中显示的顺序运行，所以只要确保你的函数在你试图附加到事件之前就已经定义好了。
- 所有的脚本都包含在html中，它们会在html被parsing的时候被载入。
- 这意味着所有的DOM对象已经加载，并且都包含脚本和CSS。 （图片可能还没有）。
- 见2。
- $（document）.ready（）只有在所有的脚本和dom对象被加载后才会调用，你应该没问题。
http://javascript.about.com/od/hintsandtips/a/exeorder.htm应该可以帮助你回答这个问题;
基本上是：首先加载所有的数据（html），然后把不在函数或者准备好的头部或者体内的代码（js）先执行。 从那里开始顺序执行脚本
值得注意的是，js优先于ie。 CSS加载 – 所以形成一个性能的angular度来看，你应该有在页面底部的JS。
所以@ 4：你不需要防止这种情况，因为first.js总是在last.js之前被读取/执行
