HTML中的脚本解析顺序[重复]答案

【问题标题】：Script parsing order in HTML [duplicate]HTML中的脚本解析顺序[重复]
【发布时间】：2016-03-15 03:30:36
【问题描述】：

浏览器加载脚本

<!DOCTYPE html>
<html dir="ltr">
<head>
<script type="text/javascript" src='./value-of-a-is-1.js'></script> <!-- Loads slow as per network tab in chrome -->
<script type="text/javascript" src='./value-of-a-is-2.js'></script> <!-- Loads faster as per network in chrome -->
</head>
<body></body>
</html>

注意：第一个脚本的加载速度比第二个脚本慢。正如我在 chrome 的网络选项卡上检查过的那样。

现在如果转到控制台并说console.log(a);，变量a（1 或2）的值应该是多少？

【问题讨论】：

脚本是并行执行的，所以答案是2
@madox2：不，他们不是。
console.log(a) 将记录“2”，除非一个或两个脚本被标记为 async（在这种情况下它是不确定的）。
您是在加载之前还是之后执行console.log？
啊，我的意思是顺序

标签： javascript html google-chrome browser

【解决方案1】：

使用您拥有的script 标签，脚本可以并行加载，但它们将按顺序（一个接一个）运行，按照它们出现在 HTML 中。

所以a 将是undefined（两个脚本都没有运行）或2（两个脚本都运行），如果第一个脚本确实加载缓慢，因为当它完成加载时，两个脚本将一个接一个地运行。

为避免对您在控制台中输入的时间感到疑惑，您可以这样做：

<script>
var a = "initial";
console.log(a);
</script>
<script type="text/javascript" src='./sets-a-to-one.js'></script>
<script>
console.log(a);
</script>
<script type="text/javascript" src='./sets-a-to-two.js'></script>
<script>
console.log(a);
</script>

...其中sets-a-to-one.js 是a = 'one';，sets-a-to-two.js 是a = 'two';。

您会可靠地看到：

最初的一二

...不管脚本的相对加载速度如何。

注意async 和defer 属性可以改变这种行为；有关详细信息，请参阅the spec。（某些浏览器可能不支持它们，或者可能只支持其中一种，或者在它们的支持中可能存在错误，FWIW。）

【讨论】：

【解决方案2】：

正确答案是 2，后一个脚本脚本最后执行（尽管它可以并行加载）。

即当只写在一个文件中时，代码看起来像这样：

<!DOCTYPE HTML>
<html>
    <head>
        <script> var a=1; </script>
        <script> var a=2; </script>
    </head>
    <body>
    </body>
</html>

【讨论】：