加载内容的 HTML 顺序和 JavaScript答案

【问题标题】：HTML order of loading content and JavaScript加载内容的 HTML 顺序和 JavaScript
【发布时间】：2012-08-14 16:34:43
【问题描述】：

我有一个注册页面，有的JS只针对这个页面，有的JS针对3个不同的页面。所以，这个页面的JS只有我写了inside标签，第二个in和external文件，包含在body标签中

代码示例

HTML
...
<script type="text/javascript" scr="src.js"></script>
<script type="text/javascript">
//some JS and jQuery code
</script>

浏览器按什么顺序加载网页？如果是读取HTML，当它找到第一个脚本时是否加载该脚本，等到完全加载后再继续读取HTML？

因为在内部 JS 中我使用了外部脚本中的一些函数，例如 jQuery $(document).ready() 函数，我想知道，如果这个事件是在 DOM 就绪时触发的，所以这意味着函数是外部 JavaScript 吗？

【问题讨论】：

不要以任何态度接受这个，因为没有暗示，但你不能试试这个看看会发生什么吗？
@j08691：我想他想知道它是否真的被强制执行了，或者这只是他现在在特定浏览器中遇到的行为。

标签： javascript jquery html

【解决方案1】：

现代浏览器在读取外部标签（带有src 属性的标签）时，会异步下载此脚本，即在以下情况下继续读取/解析HTML正在下载的脚本。

但是，浏览器会阻止所有后续脚本的执行（注意不是下载），想想一个脚本执行队列，所有脚本都会排入队列并一一执行，但下载是异步的。

早期的浏览器（主要是IE6和IE7）不同，它们会阻塞HTML解析过程，等待脚本下载并执行，然后继续解析剩余的HTML。

总结一下：下载和执行是脚本的不同阶段，现代浏览器阻塞执行阶段，下载 strong> 可以是异步和并行的以提高性能，早期的浏览器会阻塞 download 阶段，这会降低页面解析的效率。

【讨论】：

谢谢。我需要这样解释。因此，在 HTML 中的内联 JS 中，我可以使用来自外部的函数等，因为它将在执行外部之后执行（在我的情况下，因为外部在上面）。非常感谢

【解决方案2】：

wait until he isn't completely loaded and continue reading HTML

这不是它的工作原理，页面是异步加载的。

in internal JS I use some functions from external script, and in internal script is jQuery $(document).ready() function, and I want to know, if this event is triggered, when DOM is ready, so this mean even external JavaScript?

当调用附加到文档就绪事件时，它们会按照添加顺序附加到队列中，然后按该顺序调用。

【讨论】：

虽然确实存在异步加载，但当浏览器看到脚本标签时，它会停止加载其他内容，直到下载 javascript，这就是为什么在页面底部包含尽可能多的脚本的原因，而不是顶部，在访问者更快地看到您的内容方面提高了性能。见：stackoverflow.com/questions/11786915/…

【解决方案3】：

当它到达一个脚本标签时，浏览器将停止加载其他内容，直到它被解释。这意味着它会阻塞（等待）并且在完成之前不会开始获取图像或其他内容。

只要代码存在，在您调用它之前（比如函数调用），它就不会给您任何错误。只要定义了 $(document).ready() 函数，在使用它之前，所有从 $(document).ready() 调用的代码都应该是安全的。

【讨论】：

【解决方案4】：

是的，如果触发了 DOM 就绪 事件，则意味着您的所有 JavaScript 都已加载并解析。

【讨论】：

【解决方案5】：

浏览器会先解析头部。它将解析<head> 中的html，并执行它遇到的任何脚本。这将阻止页面的加载。在<head> 之后，它会以类似的方式解析<body>。这就是为什么如果你想访问 dom 将你的代码放在一个函数中并调用它onload 很重要。

希望这会有所帮助！如果您还有其他需要，请在下方发表评论。

【讨论】：

我有内联脚本$(document).ready();，所以我可以使用DOM，因为我在ready()中有重要的东西。
你能用<body onload="somefunction()">吗？
是的，但是为什么呢？我有 jQuery，它更舒服。并且在加载所有图像时触发 onload，而不仅仅是 DOM。看这里link

【解决方案6】：

脚本正在按照给出的顺序加载。所以在你的情况下，你的内联脚本

<script type="text/javascript">
//some JS and jQuery code
</script>

可以使用您包含的脚本"src.js"中定义的对象。

您不能在 DOM 对象被创建之前对其进行操作。

<body>
  <div id="div1"></div>

  <script>
    // this code can work with div1
    // but cannot work with div2
  </script>

  <div id="div2"></div>
</body>

因此，如果您的脚本使用 DOM，您可以：

放在<body>的末尾（仅当它是内联脚本时）
只有在整个 DOM 构建完成后才调用它：

<body onload="myFunctionThatManipulatesDOM();">

当然，第二种方式更干净。在<head> 部分中包含您的脚本，然后在body.onload 事件中加载页面后启动它们。

【讨论】：