在HTML标记的哪里放置<script>标记？

Z时代
2024-01-10
分类：问答

将JavaScript嵌入HTML文档中时，在哪里放置<script>标签和包含的JavaScript 的正确位置？我似乎记得你不应该将它们放在本<head>节中，但是放在本节的开头也<body>很不好，因为必须在完全呈现页面（或类似的东西）之前解析JavaScript。这似乎将本节的末尾<body>作为<script>标记的逻辑位置。

所以，在这里是把正确的地方<script>标记？

（此问题引用了这个问题，在该问题中建议将JavaScript函数调用从<a>标签移动到<script>标签。我专门使用jQuery，但更通用的答案也是合适的。）

回答：

当浏览器加载带有<script>标签的网站时，会发生以下情况：

提取HTML页面（例如index.html）

开始解析HTML

解析器遇到一个<script>引用外部脚本文件的标记。

浏览器请求脚本文件。同时，解析器阻止并停止解析页面上的其他HTML。

一段时间后，脚本将被下载并随后执行。

解析器将继续解析HTML文档的其余部分。
步骤4会导致不良的用户体验。你的网站基本上会停止加载，直到你下载了所有脚本。如果用户讨厌一件事，它正在等待网站加载。

为什么会发生这种情况？

任何脚本都可以通过document.write()或其他DOM操作插入自己的HTML 。这意味着解析器必须等到脚本被下载并执行后，才能安全地解析文档的其余部分。毕竟，脚本可能已经在文档中插入了自己的HTML。

但是，大多数JavaScript开发人员在文档加载时不再处理DOM 。取而代之的是，他们等到文档加载完成后再进行修改。例如：

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>
Javascript：
// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

因为你的浏览器不知道my-script.js在下载并执行文档之前不会修改文档，所以解析器将停止解析。

过时的推荐

解决此问题的旧方法是将

在HTML标记的哪里放置&lt;script&gt;标记？

回答：

在HTML标记的哪里放置<script>标记？