javascript的最佳位置包括答案

【问题标题】：Optimal location for javascript includesjavascript的最佳位置包括
【发布时间】：2010-01-06 01:10:30
【问题描述】：

我读到最好将<script> 标签放在文档末尾。这样做的理由似乎是浏览器将停止在脚本标记下方呈现页面，直到它加载并执行脚本。如果你的脚本标签在页面顶部，渲染会停滞一段时间，这很糟糕。

但是，我不确定这是否真的是真的。

环顾四周，我通常会看到以下位置...

在页面的`<head>` 内或`<body>` 标签内

Stackoverflow 是一个将脚本标签放在head 中的网站示例，由于它们通常对性能非常着迷，我开始怀疑页面中的位置是否重要。

`body` 元素中的最后一件事

另一个放置 javascript 的常见位置似乎是在 <body> 元素的最末端。我假设这意味着页面可以在 javascript 下载并继续执行其操作时呈现。

但哪个更好？

有人对此有什么想法或建议吗？我希望尝试让我们的页面尽快执行并出现在用户面前。

重要吗？位于页面顶部的优势是什么？页面底部？

【问题讨论】：

标签： javascript performance browser

【解决方案1】：

这真的取决于。

对此没有万能的答案，因为这取决于您的 javascript 所执行的操作。

如果您对需要加载以使脚本运行的 DOM 元素进行操作，有时需要将脚本放在页面末尾。假设您想专注于一个控件，而您的脚本是：

var mytext = document.getElementById("mytext2"); 
mytext.focus();

在这种情况下，您可能希望它在浏览器加载 mytext2 控件之后在页面末尾执行。这对于只包含由事件调用的函数的脚本块来说不太重要。

如果您有一个包含函数库的大 .js 文件，您可能还希望将其放在页面末尾，以便浏览器在加载大 .js 文件之前更快地加载页面。

Google 分析建议将他们的跟踪器放在最后，以确保在计算点击之前页面已交付，但在某些情况下，它建议将脚本也放入页眉中，这两种方式都有效。

所以，对我来说，经验法则是，除了内联执行并作用于 DOM 对象的内容或您想要在页面之后加载的大型脚本之外的所有内容的 HEAD 脚本。

Rick Strahl 刚刚在 .net 上的 placement of Javascript 上写了一篇很棒的博客：

【讨论】：

如果您使用 jQuery，您可以在 HEAD 中拥有可在 DOM 上运行的脚本，因为您可以在完成后使用 $(document).ready() 来运行回调函数。真的很整洁！但是您的观点仍然有效，每个人都不使用 jQuery（有时他们不应该使用！自己做一些事情很好）

【解决方案2】：

唯一的验证方法是将其包含在顶部（在<head> 部分中），但在底部加载会更快 - 如果您在底部附近有脚本，页面的其余部分将加载更快，给出用户响应更好，体验更好。

问题在于，大多数 Web 浏览器会停止呈现页面的 HTML，直到它们获取并解析了迄今为止的所有 JavaScript 代码。因此，如果您在 <head> 中包含一个加载缓慢的 .js 文件，则在下载和解析 .js 之前，不会呈现 HTML，甚至不会开始下载图像，因此前端工程师会传播将脚本作为尽可能在代码的下方。

我通常只是为我的 .js 文件设置一个遥远的 Expires 标头，以便它们在浏览器中缓存很长时间，然后将它们包含在 <head> 部分中。这提供了良好的性能并且看起来并不难看:-)

但是，如果您提供外部 .js 库（位于您自己的服务器之外的其他服务器上），您可能希望它们位于底部，因为您无法更改其他服务器的 Expires-header 并且您无法知道其他服务器总是会响应。

【讨论】：

【解决方案3】：

是的。 Put Scripts at the Bottom

我认为js文件的大小比javascript的位置重要得多。我总是设置更高的并发连接数，以确保它们并行下载。

【讨论】：

【解决方案4】：

我认为最好将脚本标签放在结束正文标签之前。因为：

如果元素位于脚本下方，则会阻止它们呈现。
在 IE6 中，如果页面中的 IE7 资源位于脚本下方，将被阻止下载。

来自this 文章。雅虎的性能规则 6 也是Move Scripts to the Bottom

【讨论】：

【解决方案5】：

Google Analytics 总是说把脚本标签放在页面底部。我相信其基本原理是，如果 Google 服务器出现故障，如果页面位于头部，则页面将无法加载（可能仅适用于 IE）。

【讨论】：

为什么页面加载失败？
我的理解是，某些浏览器在完全下载和解析 javascript 之前不会显示页面的内容。我完全忘记了它是如何工作的，但它必须以线性方式在页面中一次查看一个标签。不太确定...

在页面的&lt;head&gt; 内或&lt;body&gt; 标签内

body 元素中的最后一件事

但哪个更好？

在页面的`<head>` 内或`<body>` 标签内

`body` 元素中的最后一件事