JavaScript：DOM加载事件，执行顺序和$（document）.ready（）
我只是意识到，我缺乏基本的知识，当一个页面被加载到浏览器中时究竟发生了什么。
I just realized that I lack the fundamental knowledge of what exactly happens as a page is being loaded into a browser.
假设我有一个这样的结构： / p>
Assume I have a structure like this:
<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）？我知道脚本按顺序加载。
What sequence are things happening in? First the DOM then the JS is executed, is it vice-versa, or is it simultaneous (or as soon as the JS files finish downloading, without any regard to the DOM)? I know that scripts are loaded in order.
$（document）.ready（）适合？在Firebug的Net选项卡中，我看到 DOMContentLoaded 事件和加载事件。当 DOMContentLoaded 事件触发时，触发 $（document）.ready（）没有找到任何具体的信息（每个人都提到DOM加载时）。
Where does $(document).ready() fit in? In Firebug's Net tab I see DOMContentLoaded event and the load event. Is $(document).ready() triggered when the DOMContentLoaded event fires? Couldn't find any concrete info on this (everyone merely mentions "when the DOM is loaded").
什么是当DOM被加载意思？所有的HTML / JS已被浏览器下载和解析？或者只是HTML？
What exactly does "when the DOM is loaded" mean? That all HTML/JS has been downloaded and parsed by the browser? Or just the HTML?
是否有以下情况：有一个 $（document）.ready（）在 last.js 中调用代码，但在last.js加载之前运行？它最有可能在哪里（在 first.js 或内联代码块）？ 我如何防止这种情况？
Is the following scenario possible: there is a $(document).ready() which calls code in last.js, but runs before last.js has loaded? Where would it most likely be (in first.js or the inline code block)? How can I prevent this scenario?
发生在何时何地取决于什么（如果有的话）。
I want to undestand the big picture of what happens when and what depends on what (if at all).
Javascript被执行，因为它被看到。通常，浏览器停止解析页面，只要它看到一个< script> 标签，下载并运行该脚本，然后继续。这就是为什么通常建议在底部放置< script> 标签：所以用户没有空白页面，而浏览器等待脚本下载。
Javascript is executed as it is seen. Usually, the browser stops parsing the page as soon as it sees a <script> tag, downloads and runs the script, and then keeps going. This is why it's commonly advised to put <script> tags at the bottom: so the user doesn't have a blank page while the browser waits for the scripts to download.
然而，从Firefox 3.5开始，脚本在后台被下载，而页面的其余部分被渲染。在脚本使用 document.write 或类似的现在不寻常的事件中，Firefox将根据需要进行备份和重绘。我不认为其他浏览器目前这样做，但如果它是即将到来，我不会感到惊讶，IE至少支持 defer 属性在< script> 标签，将延迟加载脚本，直到页面加载为止。
However, starting from Firefox 3.5, scripts are downloaded in the background while the rest of the page is rendered. In the now-unusual event that the script uses document.write or similar, Firefox will back up and redraw as necessary. I don't think other browsers do this at the moment, but I wouldn't be surprised if it were forthcoming, and IE at least supports a defer attribute in the <script> tag that will defer loading the script until after the page is loaded.
DOMContentLoaded 正是这样的：一旦加载了DOM，它就会触发。也就是说，一旦浏览器解析了所有的HTML并在内部创建了一个树。它不等待图像，CSS等加载。 DOM通常需要运行任何你想要的Javascript，所以不必等待其他资源是很好的。但是，我相信只有Firefox支持 DOMContentLoaded ;在其他浏览器中， ready（）只会将事件附加到常规旧的 onload 。
DOMContentLoaded is exactly that: it fires as soon as the DOM is loaded. That is, as soon as the browser has parsed all of the HTML and created a tree of it internally. It does NOT wait for images, CSS, etc. to load. The DOM is all you usually need to run whatever Javascript you want, so it's nice to not have to wait for other resources. However, I believe only Firefox supports DOMContentLoaded; in other browsers, ready() will just attach an event to regular old onload.
Javascript保证按照HTML中显示的顺序运行，所以只有确保您的功能被定义，然后再尝试将其附加到事件。
Javascript is guaranteed to run in the order it appears in your HTML, so just make sure your function is defined before you try to attach it to an event.