JavaScript—分析JavaScript在Html頁面中的載入順序
阿新 • • 發佈:2019-01-30
js程式碼執行順序比較的形象,使用者可以直觀的感受這種執行順序。但是,js程式碼的執行順序是比較複雜的。有時候我們會把js程式碼寫在html裡面,而html文件在瀏覽器中解析的過程是這樣:瀏覽器按照文件流從上到下逐步解析頁面結構和資訊。js程式碼作為嵌入的指令碼也算做html文件的組成部分,因此,js程式碼在裝載時的執行順序也是根據指令碼標籤<script>的出現來順序來決定。(下面一個栗子)
<!DOCTYPE html>
<script>
console.log("頂部指令碼");
</script>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
console.log("頭部指令碼");
</script>
</head>
<body>
<script>
console.log("頁面指令碼");
</script>
</body>
</html>
<script>
console.log("底部指令碼" );
</script>
還有對於通過指令碼標籤<script>的src屬性匯入的外部js檔案指令碼,它也將按照其語句出現的順序來執行,而且執行過程是文件裝載的一部分,不會因為是外部js檔案而延期執行。
// 先載入 b.js 並且執行裡面的程式碼
<script src="b.js"></script>
// 然後在按順序執行下面的程式碼
<script>
console.log(1);
</script>