Question

我刚才意识到，我缺乏将页面加载到浏览器中的确切情况的基本知识。

假设我有这样的结构：

<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的网络标签中，我看到DOMContentLoaded事件和load事件。 $(document).ready()事件触发时会触发DOMContentLoaded吗？找不到任何具体信息（每个人只提到“加载DOM时”）。
“加载DOM时”究竟是什么意思？所有HTML / JS都已被浏览器下载和解析？或者只是HTML？
以下方案是否可行：$(document).ready()调用last.js中的代码，但在last.js加载之前运行？它最有可能在哪里（在first.js或内联代码块中）？ 如何阻止此情况？

我想要了解什么时候发生什么以及什么取决于什么（如果有的话）的大局。

Answer 1

Javascript按照看到的方式执行。通常，浏览器会在看到<script>标记后立即停止解析页面，下载并运行脚本，然后继续运行。这就是为什么通常建议将<script>标记放在底部：因此当浏览器等待脚本下载时，用户没有空白页。

但是，从Firefox 3.5开始，脚本将在后台下载，同时呈现页面的其余部分。在脚本使用document.write或类似内容的现在不寻常的事件中，Firefox将根据需要进行备份和重绘。我不认为其他浏览器目前会这样做，但如果它即将发布我不会感到惊讶，并且IE至少支持defer标记中的<script>属性，该属性将推迟加载脚本直到加载页面后。

DOMContentLoaded就是这样：它一加载DOM就会触发。也就是说，只要浏览器解析了所有HTML并在内部创建了它的树。它不会等待图像，CSS等加载。 DOM通常需要运行你想要的任何Javascript，所以不必等待其他资源。但是，我相信只有Firefox支持DOMContentLoaded;在其他浏览器中，ready()只会将事件附加到常规旧版onload。

Javascript保证按照它在HTML中出现的顺序运行，因此在尝试将其附加到事件之前，请确保定义了您的函数。

Answer 2

所有脚本都包含在html中，因为它们会在解析html时被加载。
这意味着已加载所有dom对象，并且所有对象都包含脚本和css。（图片可能还没有）。
见2。
$（document）.ready（）只有在加载所有脚本和dom对象后才会调用，你应该没问题。

Answer 3

http://javascript.about.com/od/hintsandtips/a/exeorder.htm应该可以帮助您回答

基本上是：首先加载所有数据（html），然后加载js 首先执行头部/身体内的代码，该代码不在函数或就绪状态或类似的东西中。从那里开始按顺序进行脚本

重要的是要注意js优先于ie。 css loading - 所以从表格角度看，你应该在页面底部有js。

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

JavaScript：DOM加载事件，执行顺序和$（文档）.ready（）

3 个答案: