在 HTML 文档中嵌入 JavaScript 时,放置 <script>
标记和包含的 JavaScript 的合适位置在哪里?我似乎记得您不应该将它们放在 <head>
部分中,但是放在 <body>
部分的开头也很糟糕,因为必须在页面完全呈现之前解析 JavaScript(或类似的东西)。这似乎将 <body>
部分的 end 留作 <script>
标记的逻辑位置。
那么, 是放置 <script>
标记的正确位置吗?
(此问题引用 this question,其中建议 JavaScript 函数调用应从 <a>
标记移至 <script>
标记。我专门使用 jQuery,但更一般的答案也是合适的。)
defer
属性的 <head>
标记内,或者更好地使您的脚本成为 type='module'
。现在是 2022 年。
以下是浏览器加载带有 <script>
标记的网站时发生的情况:
获取 HTML 页面(例如 index.html) 开始解析 HTML 解析器遇到一个引用外部脚本文件的 )。如果您仍然希望您的代码在 10 版之前的 Internet Explorer 中工作,请不要忘记将您的代码包装在 window.onload 中,尽管如此!
您可以将大部分 <script>
引用放在 <body>
的末尾。
但是,如果您的页面上有使用外部脚本的活动组件,那么它们的依赖项(.js 文件)应该在此之前(最好在 head 标签中)。
编写 JavaScript 代码的最佳位置是在 </body>
标记之后或之前的文档末尾,以便首先加载文档,然后执行 JavaScript 代码。
<script> ... your code here ... </script>
</body>
如果您在 jQuery 中写入,则可以在头文档中执行以下操作,并在文档加载后执行:
<script>
$(document).ready(function(){
// Your code here...
});
</script>
SyntaxError
我认为这取决于网页执行。
如果您要显示的页面在不先加载 JavaScript 的情况下无法正常显示,那么您应该首先包含 JavaScript 文件。
但是,如果您可以在不下载 JavaScript 文件的情况下显示/呈现网页,那么您应该将 JavaScript 代码放在页面底部。因为它将模拟快速页面加载,并且从用户的角度来看,页面加载速度似乎更快。
总是,我们必须在结束正文标记之前放置脚本,以期待一些特定的场景。
例如 :
`<html> <body> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>`
最好将它放在 </body>
结束标记之前。
注意:说明(上面)将元素放置在 HTML 文件底部附近的原因是浏览器按照代码在文件中出现的顺序读取代码。如果 JavaScript 先加载并且它应该影响尚未加载的 HTML,则可能会出现问题。将 JavaScript 放置在 HTML 页面的底部附近是适应这种依赖性的一种方法。要了解有关替代方法的更多信息,请参阅脚本加载策略。