浏览器加载脚本
<!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)？
最佳答案
使用您拥有的 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。 Node.js 是 a = 'two';。
您将可靠地看到:
initial one two
...无论脚本的相对加载速度如何。
请注意，async 和 defer 属性可以更改此行为；请参阅the spec了解详情。 (某些浏览器可能不支持它们，或者可能只支持其中一种，或者在支持中可能存在错误，FWIW。)
关于javascript - HTML 中的脚本解析顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34185927/