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

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

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


当前回答

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

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

其他回答

事实证明,它无处不在。

您可以使用类似jQuery的方法来延迟执行,这样它放在哪里就不重要了(除了解析过程中的小性能影响)。

    <script src="myjs.js"></script>
</body>

脚本标记应始终在正文关闭之前使用,或在HTML文件的底部使用。

页面将加载HTML和CSS,稍后将加载JavaScript。

如果需要,请选中此项:

http://stevesouders.com/hpws/rule-js-bottom.php

如果您使用的是jQuery,那么将JavaScript代码放在您认为最好的地方,并使用$(document).ready()确保在执行任何函数之前正确加载。

附带说明:我喜欢<head>部分中的所有脚本标记,因为这似乎是最干净的地方。

非阻塞脚本标记可以放置在任何位置:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>

异步脚本一旦可用,将立即异步执行当文档完成解析时执行defer脚本如果不支持异步,异步延迟脚本将返回到延迟行为

这样的脚本将在文档准备就绪后异步执行,这意味着您无法执行此操作:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

或者这个:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

或者这个:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

或者这个:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

尽管如此,异步脚本提供了以下优点:

并行下载资源:浏览器可以并行下载样式表、图像和其他脚本,而无需等待脚本下载和执行。源顺序独立性:您可以将脚本放在头部或身体内部,而不必担心阻塞(如果您使用CMS,则很有用)。尽管如此,执行顺序仍然很重要。

使用支持回调的外部脚本可以避免执行顺序问题。许多第三方JavaScript API现在支持非阻塞执行。下面是一个异步加载GoogleMapsAPI的示例。

您可以通过使用围绕JavaScript代码的专用HTML标记<script>在HTML文档中添加JavaScript代码。

<script>标记可以放在HTML的<head>部分、<body>部分或</body>close标记之后,具体取决于何时加载JavaScript。

通常,JavaScript代码可以放在文档<head>部分的内部,以便将它们包含在HTML文档的主要内容之外。

但是,如果您的脚本需要在页面布局中的某一点运行(例如使用document.write生成内容时),则应该将其放在应该调用的位置,通常在<body>部分。