外部 JavaScript - 主体还是头部？ [复制]答案

【问题标题】：External JavaScript - body or head? [duplicate]外部 JavaScript - 主体还是头部？ [复制]
【发布时间】：2012-07-18 00:50:00
【问题描述】：

可能重复：
Where is the best place to put <script> tags in HTML markup?

我应该把我的外部 JavaScript 文件放在哪里？我知道人们把它放在body标签的末尾是为了让网页看起来加载得更快。但是放在最后有什么坏处吗？

将 JavaScript 与 Google Analytics（分析）代码放在一起是一个好习惯吗？

<body>
// Everything else over here ... conent etc..
     <script src="myjavascript.js" type="text/javascript"></script>
        <script type="text/javascript">
        // google analytics code
        </script>
</body>

【问题讨论】：

我总是把它放在头部，以防我需要在某处调用正文中的某个函数，并且我不想在调用函数之前等待页面加载。
@JohnnyCraig 你应该定义。查看headjs.com - 它比使用
谢谢@rgvcorley，我看看
从 head.js 开始......这不是可选的。我的 JavaScript 仅重 11 kb，而 HTML 仅重 5 kb。（没有图片！）
“不可选”是什么意思？

标签： javascript html

【解决方案1】：

是的，人们通常将它放在最后以加快页面加载速度。谷歌分析脚本的内容是常见的做法。

您可能还想查看head.js - 这个has been shown 比放在正文末尾的单个脚本还要快

【讨论】：

谢谢！我会看看 head.js :) 但是你对 Google Analytics 代码的意思是把它放在我的代码之后还是？
视情况而定 - 如果您的 javascript 中有可以增强 UI 视觉效果的代码，那么您可能希望将其放在 GA 代码之前，以便它首先加载
道歉我之前的意思是你已经明白了 - 脚本标签是按照它们在 DOM 中遇到的顺序加载的
酷...我的网站有这个问题：如果你启动我的网站，你会得到undefined，因为我的大数组无法加载。这是因为单击“Enter”键时我有一个随机脚本。可能把它放在底部解决这个问题，因为进入时发生的脚本还不能启动？
我建议将你所有的 js 放在一个 DOM 就绪函数中——这意味着你的 javascript 在页面加载之前不会执行。您可以使用所有主要的 JS 框架（如 jQuery、原型、mootools 等）来执行此操作……但是，如果您不想使用框架，请查看此处：-code.google.com/p/domready。如果你要做很多 JS，我建议你使用一个框架 - 跨浏览器 JS 并非易事

【解决方案2】：

目前的建议是将 javascript 放置在底部，不是因为它“看起来加载速度更快”，而是因为将它们放置在底部，javascript 解析和执行不会阻止浏览器执行其他操作（例如加载其余部分）页）。

我能想到的一个缺点是，如果你在外部 JS 中定义了任何对象和函数，并想在页面中使用它们，你必须等待页面加载/准备好。

至于 Google 分析代码 - 最好将其放在底部，如您的示例所示。

【讨论】：

但它看起来加载速度更快......设计首先出现 = 更快乐的用户！但你可能是对的！顺便说一句，我的代码或分析代码优先？

【解决方案3】：

将脚本放在页面末尾将有助于improve the performance。

脚本导致的问题是它们会阻止并行下载。 HTTP/1.1 规范建议浏览器不再下载每个主机名并行超过两个组件。如果您提供图片从多个主机名，您可以获得两个以上的下载在平行下。但是，在下载脚本时，浏览器不会开始任何其他下载，即使在不同的主机名上。

需要注意的是，在访问外部 JS 中引用的任何对象之前，必须先完全加载它们。

【讨论】：