ChatGPT解决这个技术问题 Extra ChatGPT

我应该将 <script> 标签放在 HTML 标记中的什么位置?

在 HTML 文档中嵌入 JavaScript 时,放置 <script> 标记和包含的 JavaScript 的合适位置在哪里?我似乎记得您不应该将它们放在 <head> 部分中,但是放在 <body> 部分的开头也很糟糕,因为必须在页面完全呈现之前解析 JavaScript(或类似的东西)。这似乎将 <body> 部分的 end 留作 <script> 标记的逻辑位置。

那么, 是放置 <script> 标记的正确位置吗?

(此问题引用 this question,其中建议 JavaScript 函数调用应从 <a> 标记移至 <script> 标记。我专门使用 jQuery,但更一般的答案也是合适的。)

如果您也只是在寻找一个简单的解决方案,并且您正在使用一些服务器端生成器,例如 Jekyll,我建议您将脚本包含在其中。简单多了!
如果来自寻找这个的搜索引擎:许多答案都不清楚“脚本标签”到底应该在哪里。如果 'script' 标签是 after '</body>',则 HTML 验证将导致 "Error: Stray start tag script"(选中选项"source" 并单击 "check" 以查看 HTML 源代码)。它应该在 '</body>' 之前。 (如果 'script' 标签位于最后,在 </html> 标签之后,结果类似。)
TLDR 将其放在具有 defer 属性的 <head> 标记内,或者更好地使您的脚本成为 type='module'。现在是 2022 年。

c
chris Frisina

以下是浏览器加载带有 <script> 标记的网站时发生的情况:

获取 HTML 页面(例如 index.html) 开始解析 HTML 解析器遇到一个引用外部脚本文件的 )。如果您仍然希望您的代码在 10 版之前的 Internet Explorer 中工作,请不要忘记将您的代码包装在 window.onload 中,尽管如此!


在接受的答案中,这被称为“过时的建议”。如果您仍然是认真的,您可能应该提供一些参考来支持它。
P
Peter Mortensen

您可以将大部分 <script> 引用放在 <body> 的末尾。

但是,如果您的页面上有使用外部脚本的活动组件,那么它们的依赖项(.js 文件)应该在此之前(最好在 head 标签中)。


P
Peter Mortensen

编写 JavaScript 代码的最佳位置是在 </body> 标记之后或之前的文档末尾,以便首先加载文档,然后执行 JavaScript 代码。

<script> ... your code here ... </script>
</body>

如果您在 jQuery 中写入,则可以在头文档中执行以下操作,并在文档加载后执行:

<script>
    $(document).ready(function(){
        // Your code here...
    });
</script>

它抛出 SyntaxError
您的回答没有错,但急需更新。
将脚本放在正文或 html 代码的末尾不是一个好主意。通常的做法是将这种元信息放在它所属的位置:头部。
重新“在文件的末尾......</body>标签”:不,不,不!。如果 'script' 标记在 '</body>' 之后,HTML validation 将产生“Error: Stray start tag script”(选中选项“source”并单击“check”以查看 HTML 源代码)。如果是之前,it validates
P
Peter Mortensen

我认为这取决于网页执行。

如果您要显示的页面在不先加载 JavaScript 的情况下无法正常显示,那么您应该首先包含 JavaScript 文件。

但是,如果您可以在不下载 JavaScript 文件的情况下显示/呈现网页,那么您应该将 JavaScript 代码放在页面底部。因为它将模拟快速页面加载,并且从用户的角度来看,页面加载速度似乎更快。


P
Patel Charul

总是,我们必须在结束正文标记之前放置脚本,以期待一些特定的场景。

例如 :

`<html> <body> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>`

P
Pedro Soares

最好将它放在 </body> 结束标记之前。

为什么? 根据官方文档:https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics#a_hello_world!_example

注意:说明(上面)将元素放置在 HTML 文件底部附近的原因是浏览器按照代码在文件中出现的顺序读取代码。如果 JavaScript 先加载并且它应该影响尚未加载的 HTML,则可能会出现问题。将 JavaScript 放置在 HTML 页面的底部附近是适应这种依赖性的一种方法。要了解有关替代方法的更多信息,请参阅脚本加载策略。