[英]Javascript loads first even though code at the end of <body> tag
我在 HTML 文件的標記末尾添加了外部 Javascript 但是，警報首先加載，並且只有在警報上點擊“確定”按鈕時，內容才會加載。 下面是我的 HTML 和 JS 代碼。
*我已經嘗試過將腳本放入異步/延遲中。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
JS
alert("Hello");
DOM 解析通常發生在主線程上。 所以如果主 JavaScript 執行線程忙，DOM 解析將不會進行，直到線程空閑。
如果腳本元素是一個外部腳本文件，瀏覽器將開始從主線程下載外部腳本文件，但它將停止主線程的執行，直到該文件被下載。 這意味着在下載腳本文件之前不再解析 DOM。
您應該了解網站加載/解析/呈現時發生的步驟
如果你沒有使用 alert() function，你甚至不會注意到，但提醒的特別之處在於它會停止所有進一步的執行，直到你確認警報，關於上面寫的，這解釋了為什么頁面在確認警報后呈現
alert是一個同步的 function。請注意，將腳本放在主體的末尾僅意味着它會在解析頁面時運行，而不是在顯示內容時運行。 內容只在后面顯示 因為alert是同步的，它會先運行然后顯示內容。
您可以嘗試將正在執行的任何邏輯放在window的onload事件上，如下所示：
window.onload = () => {
// logic goes here
console.log('the document has been loaded');
};
Javascript 具有異步行為。 如果你想在做任何事情之前確保 dom 已加載，請考慮使用 Jquery
在將 Jquery 庫放入 js 代碼之前：
$(document).ready(function(){
//... all your's stuffs here
});
專業提示：學習 Jquery 將帶領您創造令人驚嘆的事物！！ 最好的祝福
即使我將 script 標簽放在 body 標簽的末尾之前，谷歌瀏覽器也會首先加載 javascript
[英]Google Chrome loads the javascript first even I put the script tag before the end of the body tag
html 元素在 Javascript 文件之后加載，即使<script> tag is at the bottom of the <body> tag
[英]html elements load after Javascript file even though the <script> tag is at the bottom of the <body> tag
代碼*如何在* HEAD標記的結尾和BODY標記處理之間？
[英]How is code *between* the end of the HEAD tag and before the BODY tag processed?
無法訪問屬性 "innerHTML", document.getElementById('id' +num) 即使 js 在末尾聲明
[英]can't access property "innerHTML", document.getElementById('id' +num) even though js is declared at the end of <body>
將jQuery / javascript源頁面放在body標簽結尾之前
[英]Putting jQuery/javascript source pages before end of body tag
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.