脚本的HTML解析顺序

浏览器加载脚本脚本的HTML解析顺序

<!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）的值应该是多少？

来源

2015-12-09 Gyandeep

脚本并行执行，所以答案是2 – madox2

@ madox2：不，它们不是'吨。 –

'console.log（a）'会记录“2”，除非一个或两个脚本被标记为'async'（在这种情况下它是不确定的）。 –

你所拥有的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。）

来源

2015-12-09 18:10:56

正确的答案是2，后面的脚本脚本最后执行（虽然它可以并行加载）。

I.e.该代码是这样，在短短一个文件写入时：

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

来源

2015-12-09 18:10:48

脚本的HTML解析顺序

回答

相关问题