在HTML文档中嵌入JavaScript时,在哪里放置<script>标记和包含的JavaScript?我似乎记得,你不应该把这些放在<head>部分,但放在<body>部分的开头也是不好的,因为JavaScript必须在页面完全呈现之前进行解析(或类似的)。这似乎将<body>部分的结尾作为<script>标记的逻辑位置。

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

(这个问题引用了这个问题,其中建议将JavaScript函数调用从<a>标记移动到<script>标记。我专门使用jQuery,但更一般的答案也是合适的。)


当前回答

雅虎推广的标准建议!卓越性能团队,将<script>标记放在文档的<body>元素的末尾,这样它们就不会阻止页面的呈现。

但有一些新的方法可以提供更好的性能,正如我在另一个关于Google Analytics JavaScript文件加载时间的回答中所描述的:

Steve Souders(客户端性能专家)的一些精彩幻灯片介绍了:并行加载外部JavaScript文件的不同技术它们对加载时间和页面呈现的影响浏览器显示什么样的“正在进行”指示符(例如状态栏中的“加载”、沙漏鼠标光标)。

其他回答

脚本阻止DOM加载,直到加载并执行。

如果将脚本放在<body>的末尾,则所有DOM都有机会加载和渲染(页面将更快地“显示”)<script>将可以访问所有这些DOM元素。

另一方面,将其放置在<body>start或更高位置之后将执行脚本(其中仍然没有任何DOM元素)。

您包括jQuery,这意味着您可以将其放置在任何您希望的位置并使用.ready()。

通常,我们必须在结束体标记之前放置脚本,以期待某些特定场景。

例如:

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

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

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

注:说明(上面)放置元素的原因HTML文件的底部附近是浏览器在在文件中显示的顺序。如果JavaScript首先加载,并且它应该会影响HTML尚未加载,可能会出现问题。放置JavaScript靠近HTML页面底部是一种适应这种情况的方法附属国。要了解有关替代方法的更多信息,请参见脚本加载策略。

在结尾包含脚本主要用于首先显示网页内容/样式的地方。

在头中包含脚本可以很早加载脚本,并且可以在加载整个网页之前使用。

如果最后输入了脚本,则只有在加载了整个样式和设计之后才进行验证,这对于快速响应的网站来说是不受欢迎的。

现代方法是使用ES6“模块”类型脚本。

<script type="module" src="..."></script>

默认情况下,模块是异步和延迟加载的。即,您可以将它们放置在任何位置,它们将并行加载,并在页面完成加载时执行。

进一步阅读:

脚本和模块之间的区别与脚本相比,模块的执行被延迟(默认情况下模块被延迟)ES6模块的浏览器支持