在 HTML 中添加 Javascript 文件的最佳方法-js教程-PHP中文网

在 HTML 中添加 Javascript 文件的最佳方法

Barbara Streisand

发布： 2024-10-09 20:33:28

原创

646 人浏览过

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 完全解析后再执行脚本