HTML 中的 <script> 标签用于引入 JavaScript 代码。通常情况下，一个 HTML 文档只有一个 <script> 标签，但是有时候会有多个标签存在。本文将讨论这种情况下的一些细节和注意事项。
1. 执行顺序
当页面中存在多个 <script> 标签时，它们的执行顺序是按照它们在 HTML 中的出现顺序来执行的。也就是说，先出现的先执行，后出现的后执行。
<body> <script src="a.js"></script> <script src="b.js"></script> </body>
在上面的示例中，a.js 会先于 b.js 执行。
2. 全局作用域
每个 <script> 标签中定义的变量都在全局作用域中，因此如果两个 <script> 标签都定义了同名变量，那么后面的定义会覆盖前面的定义。
-- -------------------- ---- -------
------
--------
--- - - --
---------
--------
--- - - --
--------------- -- -- -
---------
-------在上面的示例中，第二个 <script> 标签中重新定义了变量 x，导致第一个 <script> 标签中的定义被覆盖。
3. 引入顺序
当一个 <script> 标签依赖另一个 <script> 标签中定义的变量时，需要确保先引入被依赖的标签。否则会出现变量未定义的错误。
<body> <script src="a.js"></script> <script src="b.js"></script> </body>
在上面的示例中，如果 b.js 中使用了 a.js 中定义的变量，那么必须先引入 a.js。
4. defer 和 async 属性
HTML5 引入了 defer 和 async 属性来控制 <script> 标签的加载和执行方式。
defer 属性表示脚本可以延迟到文档完全被解析和显示之后再执行。多个带有 defer 属性的 <script> 标签会按照它们在 HTML 中的出现顺序依次执行，但是它们的执行时机是在 DOMContentLoaded 事件之后。
<body> <script src="a.js" defer></script> <script src="b.js" defer></script> </body>
在上面的示例中，a.js 和 b.js 会在 DOMContentLoaded 事件之后依次执行。
async 属性表示脚本可以立即下载和执行，不会阻塞文档的解析和渲染。多个带有 async 属性的 <script> 标签会异步下载并执行，但是它们的执行顺序是不确定的。
<body> <script src="a.js" async></script> <script src="b.js" async></script> </body>
在上面的示例中，a.js 和 b.js 的下载和执行顺序是不确定的。
结论
多个 <script> 标签在 HTML 中的使用需要注意它们的执行顺序、全局作用域、引入顺序以及 defer 和 async 属性的影响。合理地使用这些特性可以提高页面加载和执行的效率。
参考文献：