腳本的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解析順序

回答

相關問題