加载内容和JavaScript的HTML顺序

我有一个注册页面，一些JS仅用于该页面，另一个JS用于3个不同的页面。所以，JS这个页面只有我已经写了里面的标签，并在第二和外部文件，该文件被列入body标签加载内容和JavaScript的HTML顺序

代码示例

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？

来源

2012-08-14 Arxeiss

不要以任何态度采取这种态度，因为没有暗示，但你不能只是试试这个，看看会发生什么？ – j08691 2012-08-14 16:38:19

@ j08691：我想他是想知道它是否被强制执行，或者如果这恰好是他现在在他的特定浏览器中的行为。 – DaoWen 2012-08-14 16:39:32

近代浏览器，当读取到外部变量（一个src属性），将下载该脚本异步，也就是说，继续阅读/脚本它被下载时解析HTML。但是，浏览器会阻止所有后续脚本的执行（请注意不要下载），想到脚本执行队列，所有脚本都会逐个排队并执行，但下载是异步的。

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

综上所述：下载和执行是一个脚本的不同阶段，近代的浏览器块执行阶段，下载可能是异步和平行提升了性能，早期的浏览器块下载阶段这使得页面解析效率降低。

来源

2012-08-14 16:41:40 otakustay

谢谢。我需要这样解释。所以在HTML中的内联JS中，我可以使用外部的函数等，因为它将在执行外部（在我的情况下，因为外部在上面）执行。非常感谢你 – Arxeiss 2012-08-14 17:17:52

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-14 16:38:17

尽管真的存在异步加载，但是当浏览器看到脚本标记时，它会停止加载其他东西，直到下载javascript为止，这就是为什么在页面底部包含尽可能多的脚本而不是顶部会提高性能在访问者看到您的内容更快。请参阅：http://stackoverflow.com/questions/11786915/javascript-on-the-bottom-of-the-page – Wolfe 2012-08-14 16:40:21

是的，如果DOM准备好事件被触发，这意味着所有的JavaScript已经被加载和解析。

来源

2012-08-14 16:38:31 DaoWen

只要它到达脚本标记，浏览器就会停止加载其他内容，直到它被解释为止。这意味着它会阻止（等待）并且不会开始获取图像或其他内容，直到完成。

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

来源

2012-08-14 16:38:47 Wolfe

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

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

来源

2012-08-14 16:44:28 starbeamrainbowlabs

我在内联脚本'$（document）.ready（）;'所以我可以使用DOM，因为我在ready（）中有重要的事情。 – Arxeiss 2012-08-14 17:12:58

你可以使用''也许？ – starbeamrainbowlabs 2012-08-14 17:13:53

是的，但为什么？我有jQuery，它更舒适。当所有图像加载时，onload被触发，而不仅仅是DOM。看看这里[链接]（http://stackoverflow.com/questions/191157/window-onload-vs-body-onload） – Arxeiss 2012-08-14 17:24:53

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

<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-14 16:44:44 Imp

加载内容和JavaScript的HTML顺序

回答

相关问题