javascript - html标记将<script>标记最好的地方在哪里?

  显示原文与译文双语对照的内容

在HTML文档中嵌入JavaScript时,最好的地方是放置 <script> 标签和包含的JavaScript? 我似乎还记得么,为什么总是会看到将这些函数放在 <head> 节,但放置的开头 <body> 部分已经很糟,也很有利,因为JavaScript将必须被解析在呈现该页前完全( 或者诸如此类的东西) 。 于 <script> 相关tags,这似乎离开的结束 <body> 截面作为逻辑 place.

所以,在 <script> 标记 最好的放置地点是哪?

<a> 标记以 <script> tags, ( 这个问题这个问题引用 JavaScript函数调用应该 moved.,有人建议在其中, 我特别使用 JQuery,但更一般的答案也是合适的。

时间:

由雅虎推动的标准建议 ! 杰出的性能团队,是将 <script> 标记放在文档正文的末尾,这样它们就不会阻止页面呈现。

但是有一些新的方法提供更好的性能,我在这里复制了另一个答案:


有一些由史蒂夫 Souders 伟大的幻灯片 ( client-side性能专家) 关于:

  • 并行加载外部JavaScript文件的不同技术
  • 它们对加载时间和页面呈现的影响
  • 浏览器显示的"正在进行中"指示器种类( 例如。 ''加载'在状态栏中,沙漏鼠标光标) 。

如果你使用的是 JQuery javascript直接放在无论什么时候你发现它最好和使用 $(document).ready(),以确保东西都正确加载才可以执行任何功能。

从一个方面说明:我喜欢我所有的脚本标记在 <head> 部分,因为这似乎是最干净的地方。

Non-blocking脚本标记可以放在任何地方:


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

这样的脚本将在 document ready 之后异步执行,这意味着你不能这样做:


<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
-->

说到,异步脚本提供了以下优点:

  • 并行下载的资源:
    浏览器可以同时下载样式表,图像和其他脚本,而无需等待脚本下载和执行。
  • 源代码独立独立:
    你可以将脚本放在head或者body中,而不必担心阻塞( 如果你使用的是 CMS ) 。 执行顺序仍然很重要。

可以通过使用支持回调的外部脚本来规避执行顺序问题。 许多第三方 JavaScript api现在支持non-blocking执行。 下面是一个加载 谷歌地图 API的示例。

...