首頁 >web前端 >js教程 >在 HTML 中新增 Javascript 檔案的最佳方法

在 HTML 中新增 Javascript 檔案的最佳方法

Barbara Streisand原創: 2024-10-09 20:33:28747瀏覽

Best Way to add Javascript file in HTML

在 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 完全解析後再執行腳本

摘要：最佳方法

最好的方法通常是使用：

為什麼：

它不會阻止 HTML 解析（非阻塞下載）。
它確保腳本在 DOM 完全解析後運行，從而更安全地操作 DOM 元素。
如果您有多個延遲腳本，它會保留腳本執行順序。

如果腳本獨立於 DOM 內容（例如追蹤腳本或廣告），您可以使用非同步來獲得更好的效能。

以上是在 HTML 中新增 Javascript 檔案的最佳方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html if for while include Error finally JS dom this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：高級反應概念 |反應4下一篇：高級反應概念 |反應4

看更多