HTML中多个<script>标记的含义

最后发布:


问题
None javascript jquery html
回答

简单回答:

在一个简单的场景中(标签是原始HTML文本的一部分),浏览器肯定会一个接一个地执行它们。

详细讨论与不同的警告

JavaScript不一定是单线程的(它取决于JavaScript引擎的实现,例如参见Web Workers )。

但是,各个<script>标签是按顺序执行的。

有关参考,请参阅JavaScript: The Definitive Guide 引用“12.3。执行JavaScript程序”一章:

出现在和标签之间的JavaScript语句按照出现的顺序执行; 当文件中出现多个脚本时,脚本将按照它们出现的顺序执行。 如果脚本调用document.write(),则传递给该方法的任何文本都会在结束标记之后立即插入到文档中,并在脚本完成运行时由HTML解析器进行解析。 相同的规则适用于具有src属性的单独文件中包含的脚本。


请注意,以上仅适用于标签中“直接”执行代码。 但是,订单可能受以下因素影响:

  • setTimeout()调用(duh)

  • 推迟属性

  • <script>标签的动态附件 - 请参阅本答案的最后一部分。


需要注意的是,通过<script src="xxxx" />从外部加载的JavaScript代码仍然会按顺序执行,但是,浏览器很可能会并行下载代码 - 取决于浏览器的实现(但仍然以正确的顺序安排下载的代码片段的执行。

这个警告很重要,如果你想要一些奇怪的黑客,而JavaScript源的URL实际上是一个CGI脚本,它做了一些事情,你试图依赖于脚本中逻辑的正确下载顺序。

同样,它与您的浏览器JS引擎的那些脚本片段的执行顺序无关。


然而,一个更重要的警告是,如果你实际上动态地附加<script>标签与外部源(例如通过appendChild()调用),根据这篇SO帖子 ,以及该帖子基于MSDN博客 ,非-IE浏览器不保证执行顺序! 这将取决于哪个标签的代码首先完成下载!


回答

您实例化jQuery对象的调用越少,开销就越少 - 但即使您正在为第二代硬件上运行的旧浏览器进行设计,也要小心微优化。 分析您的应用程序并修复实际上是瓶颈的部分。

至于浏览器处理多个脚本标签的方式 - 从浏览器到浏览器,从版本到版本,有时甚至从操作系统到操作系统都有所不同。 所有浏览器按文档顺序执行每个脚本标记:

<script src="scripts/some_script.js"></script> <!-- Executed 1st -->
<script src="scripts/some_other_script.js"></script> <!-- Executed 2nd -->
<script>
// Some JavaScript
</script> <!-- Executed 3rd -->
<script>
// Some More JavaScript
</script> <!-- Executed 4th -->

但是,没有定义其他行为,并且存在变化。 例如,Opera(至少在Windows XP上版本10.6)在其自己的上下文中运行每个脚本标记 - 因此,如果在第4个脚本块中引用,则第3个脚本块中的局部变量将超出范围。

<script>
var i = 42;
</script>
<script>
alert(i);
// Alerts "undefined" in Opera, but 42 in Firefox.
</script>


回答

浏览器按顺序执行JavaScript(jQuery也是如此,因为jQuery只是JavaScript)。

至于在HTML中有多个脚本标签,没有理由认为这是一个问题。 正如Nabab所问,我很想看到你的来源。


回答

浏览器是否在处理过程中将所有javascript编译成一个“文件”。 例如,如果您在多个文件中有多个$(document).ready()调用,那么当浏览器预处理页面时,它基本上会压缩所有内容以执行 - 并按照“看到”的顺序依次运行它。