在HTML文件中放置Javascript

可能重复：

好的，我使用JavaScript已经有一段时间了，我对它并不陌生，但我的问题是JavaScript应该在HTML文件中的位置

我一直被告知并在这样的印象中工作：您对外部脚本文件的所有引用都应该包含在

head

标记中，而当前HTML文件中包含的任何脚本都应该位于文件的末尾

现在，在最近和同事们的讨论中，我看到越来越多的人将脚本块放置在整个HTML页面中看似随机的位置，例如

<div>
   <p>Foo</p>
   <script type="text/javascript">
       //some script
   </script>
   <p>Bar</p>
</div>

福

//一些剧本
酒吧

---

这是个好习惯吗？我一直认为不是。如果是这样的话，是不是因为脚本在那一点上被执行了，那么为什么不能等到HTML的其余部分都被加载了呢？

脚本应该放在页面的底部，因为这样可以让所有站点资源（如图像）并行下载。一旦完成，脚本将被下载，一次下载一个

最好将脚本放在页面底部，因为它们会阻止并行下载。通常情况下，浏览器会并行下载图像等资源，每个主机名一次下载两个资源（按照HTTP 1.1规范的规定）。脚本阻止这种情况发生，并且在完全下载之前不允许下载任何其他内容。

重复此问题

---

有时，当您希望确保在运行脚本之前创建特定的dom时，它会很有帮助（并且非常有效）。

+1在页面底部投赞成票

给来访者提供服务

• 内容和标记优先

• 然后用css显示

• 然后使用javascript创建ui

---

欣赏这是一个有点高的眉目

当我使用内联时，它对我有一个明显的好处。比如说

（我将尝试用基本场景来解释，所以不要对场景持批评态度）

---

我的页面中有A、B和C html部分（div）。很明显，我将呈现它们，但我希望一次只有一个部分对访问者可见。所以我不能等待整个页面和javascript文件被加载，然后应用“setvisibilitypriorityforsection”javascript方法启动。因为在此期间，所有三个部分（A、B和C）都将保持可见，直到所有内容都未完全加载。页面可能看起来很糟糕，所以我更喜欢使用内联javascript。

基本上，你放在页眉上的脚本是同步下载的，你可以确定它们将按顺序执行，但是如果不需要在页面加载完成之前执行这些脚本，也许你可以预先将它们包含在底部，或者以延迟的方式，更快地完成页面渲染，并为用户提供更好的体验

关于HTML中包含的脚本，这取决于它们的功能。例如，如果出于某种原因需要执行Document.write，或者希望在呈现页面之前执行一些代码来修改DOM，那么它们非常方便

---

我强烈建议您阅读Steve Souders的两本书：“高性能网站”和“更快的网站”，在这两本书中，您对差异有了很好的解释。

开始在Rob Sedge的回复下面写评论，但它变得更大了

1） CSS位于页眉顶部（除非您希望用户看到页面而不使用样式，对于大型HTML文件/外部JS，加载时间可能很长）

2） 正文中的内容和标记

3） 页脚中的JS，在

尽管目前强烈建议在$（document）.ready或$（window）.load事件中进行JS评估，但某些外部脚本可能不会这样做-在这种情况下，内容下载后将立即对其进行评估，通常会导致随机行为。此外，一旦浏览器实际处理了给定的标记（第1点），就会对内容进行评估，从而获得更多有趣的内容

另外一点（至少对我来说是主要的）是——假设您的文档中包含了一个模板引擎或PHP。现在，假设您有很多这样的文件，其中一个JS代码需要更改。在这种情况下，如果您不是项目中唯一的工作人员，那么您需要在所有这些文件中搜索给定的代码位。因此，将JS放在一个地方是一个很好的实践

---

让我们补充一点，如果您确实将JS代码保存在一个地方，那么这些内容可以被缩小或缓存，从而可以更快地加载整个站点。为什么你真的希望用户在每次加载页面时下载你的JS，而脚本可以从缓存中进行评估。如果将脚本分开，这种方法将变得很困难。

他们总是告诉我将任何javascript放在页面底部。不管它是否是外部文件。这样做的好处是javascript在页面加载时执行，这很重要。脚本阻止并行下载。@SamyDindane这不是为什么最好将脚本放在页面底部的原因吗？是的。因此，位置确实很重要。：）@SamyDindane是的，我会更正我的答案。