Question

浏览器加载脚本

<!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>

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

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

Answer 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';。

您可以可靠地看到：

initial
one
two

...无论脚本的相对加载速度如何。

请注意，async和defer属性可以更改此行为;有关详细信息，请参阅the spec。（有些浏览器可能不支持它们，或者可能只支持其中一个，或者可能有支持错误，FWIW。）

Answer 2

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

即。当只用一个文件编写时，代码看起来就像那样：

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

HTML

2 个答案: