首页 >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

上一篇：Advanced React Concepts | React 4下一篇：Combining Repository and Event-Driven Patterns

查看更多