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

Question

我已经读过,不建议在HTML中多次实例化jQuery.这对我来说很有意义,但是:不管Javascript是单线程的吗？并且让jQuery落后,浏览器如何执行这些多个脚本标记？并行或一个接一个？

谢谢,菲利普

Answer 1

简单回答:

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

详细讨论与不同的警告

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

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

供参考,请参阅JavaScript: The Definitive Guide.引用"12.3.执行JavaScript程序"一章:

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

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

• setTimeout() 电话(duh)

• 推迟属性

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

作为一个警告,请注意外部加载的JavaScript代码<script src="xxxx" />仍然会按顺序执行,但是,浏览器很可能并行下载代码 - 取决于浏览器的实现(但仍然安排正确执行下载的代码片段)订购).

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

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

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

Answer 2

实例化 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>