在 HTML 中，有多種方法可以包含 JavaScript 檔案。我將解釋四種不同的方法及其缺點，最後強調最佳方法。
1.在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js"></script>
</head>
<body>
</body>
</html>
在這種方法中，在解析程式碼時，首先在body 內的html 之前加載JavaScript 文件，如果JavaScript 嘗試操作body 中尚未解析的元素，則可能會導致錯誤，因為HTML 內容尚未完全解析已加載。
這種阻塞行為會延遲頁面其餘部分的解析和渲染，影響效能和使用者體驗。
2.在中（最後）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="custom.js"></script>
</body>
</html>
在這種方法中，在載入和執行 JavaScript 之前完全解析 HTML，從而防止與遺失 DOM 元素相關的錯誤。這種方法很好，但由於 HTML 解析和 JavaScript 載入是順序發生的，因此總體上可能需要更長的時間，因為這兩個過程發生在不同的時間
3.在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js" async></script>
</head>
<body>
</body>
</html>
在這種方法中，我們使 JavaScript 非同步，因此它不會阻止 HTML 載入。 HTML 解析和 JavaScript 載入是並行發生的。但是，如果 JavaScript 在 HTML 完全解析之前執行，並且 js 嘗試操作尚未載入的 html 元素，則可能會導致錯誤。
注意：—這種方法可以節省時間，但同時載入 html、js 但更容易出錯
4.在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js" defer></script>
</head>
<body>
</body>
</html>
這種方法類似於第三種方法，其中 HTML 解析和 JavaScript 載入是並行發生的。然而，即使 JavaScript 首先加載，瀏覽器也會等到 HTML 完全解析後再執行腳本
最好的方法通常是使用：
為什麼：
如果腳本獨立於 DOM 內容（例如追蹤腳本或廣告），您可以使用非同步來獲得更好的效能。
以上是在 HTML 中新增 Javascript 檔案的最佳方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
