0

我有一个注册页面，有的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 ?

4

6 回答 6

6

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

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

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

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

于 2012-08-14T16:41:40.887 回答
1

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?

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

于 2012-08-14T16:38:17.060 回答
1

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

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

于 2012-08-14T16:38:47.100 回答
0

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

于 2012-08-14T16:38:31.657 回答
0

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

希望这可以帮助！如果您需要其他任何内容，请在下面发表评论。

于 2012-08-14T16:44:28.273 回答
0

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

<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

于 2012-08-14T16:44:44.013 回答