文档: DOM加载事件、执行序列和$(JavaScript).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>以下是我的问题：
- What序列中是否发生了某些事情？首先是DOM，然后执行JS，反之亦然，还是同时发生(或者JS文件下载完成，而不考虑DOM)？我知道脚本是加载在Firebug中的in
$(document).ready()fit in?在Firebug的Net选项卡中，我看到了DOMContentLoaded事件和load事件。DOMContentLoaded事件触发时会触发$(document).ready()吗？找不到任何关于这方面的具体信息(每个人都只是提到“当DOM是loaded"). - What时”是什么意思？浏览器已经下载并解析了所有的HTML/JS？或者仅仅是HTML？
- 是可能的:有一个
$(document).ready()调用last.js中的代码，但是在last.js加载之前运行？它最有可能在哪里(在first.js或内联代码块中)？如何防止此scenario?
我想要理解发生了什么，什么时候发生，什么取决于什么(如果有的话)的大背景。
回答 3
Stack Overflow用户
发布于 2009-08-20 18:26:03
Javascript按所见方式执行。通常，浏览器一看到<script>标记就会停止解析页面，下载并运行脚本，然后继续执行。这就是为什么通常建议将<script>标记放在底部的原因:这样在浏览器等待脚本下载时，用户就不会有空白页面。
但是，从Firefox3.5开始，脚本在后台下载，而页面的其余部分则呈现。在现在不常见的情况下，脚本使用document.write或类似的脚本，火狐将在必要时备份和重绘。我不认为其他浏览器目前会这样做，但如果它即将推出，我不会感到惊讶，IE至少支持<script>标记中的defer属性，该属性将延迟加载脚本，直到页面加载之后。
DOMContentLoaded就是这样:只要加载DOM，它就会触发。也就是说，只要浏览器解析了所有的HTML并在内部创建了它的树。它不会等待图像、CSS等加载。DOM通常是您运行任何Javascript所需的全部，所以不必等待其他资源是很好的。然而，我相信只有火狐支持DOMContentLoaded；在其他浏览器中，ready()只会将一个事件附加到常规的旧onload上。
Javascript保证按照它在HTML中出现的顺序运行，所以只需确保在尝试将其附加到事件之前定义了函数即可。
Stack Overflow用户
发布于 2009-08-20 18:18:39
- 所有脚本包含的内容是按照它们出现在html中的顺序发生的，它们在html解析时被加载。
- 这意味着所有dom对象都已被加载，并且都包含脚本和css。(图像可能还没有)。
- see 2.
- $(document).ready()只有在加载了所有脚本和dom对象后才会被调用。
Stack Overflow用户
发布于 2009-08-20 18:21:11
http://javascript.about.com/od/hintsandtips/a/exeorder.htm应该会帮助你回答这个问题
基本上:首先加载所有数据( html)，然后执行js头/主体中的代码，这些代码不在函数中或就绪或类似的东西中。从那里开始，它按顺序处理脚本
值得注意的是，js优先于ie。css加载-所以从性能的角度来看，你应该把js放在页面的底部。
所以@4:你不需要阻止这种情况，因为first.js总是在last.js之前被读取/执行
https://stackoverflow.com/questions/1307929
复制相似问题