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

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

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


当前回答

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

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

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

其他回答

就在结束正文标记之前,如在底部放置脚本所述:

将脚本放在底部脚本造成的问题是它们阻止并行下载。HTTP/1.1规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像,您可以同时获得两次以上的下载。然而,当下载脚本时,浏览器不会启动任何其他下载,即使是在不同的主机名上。

最保守(也被广泛接受)的答案是“在结束标记之前的底部”,因为这样,在任何东西开始执行之前,整个DOM都将被加载。

出于各种原因,有人持不同意见,首先是有意识地开始执行页面加载事件。

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

如果要显示的页面在未加载JavaScript的情况下无法正确显示,则应首先包含JavaScript文件。

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

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

<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的示例。

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

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

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

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