logo标签列表

外部 JavaScript - 放在<body>还是<head>中？

javascripthtml
26

可能是重复问题：
在HTML标记中放置<script>标签的最佳位置是哪里？

我应该把外部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>
我总是把它放在头部，以防我需要在正文中调用其中一个函数，而我不想等待页面加载才调用该函数。 - Johnny Craig
@JohnnyCraig 你一定要看看 http://headjs.com - 它比使用<script>标签加载更快，并且解决了脚本在调用时未被加载的依赖问题。它还非常轻量级 - 绝对值得一看！ - rgvcorley
你是什么意思说“不是可选的”？ - rgvcorley
@rgvcorley 我是谢尔顿·库珀？我的head.js的重量超过了我自己.js。 - Jason Stackhouse
@rgvcorley 我会记住这个建议的。我在你的回答中添加了一个新评论。 - Jason Stackhouse
显示剩余2条评论
3个回答
7

通常人们会将脚本放在页面末尾以加快页面加载速度。您现在使用的谷歌分析脚本是常见做法。

您还可以查看head.js - 它已被证明比单个放在body末尾的脚本更快。

谢谢！我会看一下head.js :) 但是你所说的Google Analytics代码是放在我的代码之后还是？ - Jason Stackhouse
取决于情况 - 如果您的JavaScript代码在视觉上增强了UI，则可能希望将其放在GA代码之前，以便它首先加载。 - rgvcorley
抱歉，我的意思是像你所说的那样——脚本标签按照在DOM中遇到的顺序加载。 - rgvcorley
很酷啊！我网站遇到了一个问题：如果你打开我的网站，会得到“未定义”，因为我的非常大的数组没有加载。这是因为当点击“Enter”键时，有一个随机脚本启动。也许把它放在底部会解决这个问题，因为按Enter键时发生的脚本不能立即启动？ - Jason Stackhouse
我建议将所有的js代码放在DOM就绪函数中 - 这意味着在页面加载完成之前不会执行你的javascript代码。你可以使用所有主要的JS框架，如jQuery、prototype、mootools等...但是如果你不想使用框架，那么可以在这里查看：http://code.google.com/p/domready/。如果你要做很多JS的话，我建议使用一个框架 - 跨浏览器JS并不是一件简单的事情。 - rgvcorley
head.js链接已经不再相关（网站被替换为其他内容）。 - ofaurax
4
当前的建议是将javascript放在底部，不是因为它“看起来加载更快”，而是因为把它放在那里可以避免JavaScript解析和执行阻止浏览器完成其他任务（例如加载页面剩余部分）。
我能想到的一个缺点是，如果你在外部JS中定义了任何对象和函数，并希望在页面中使用它们，你必须等待页面加载/准备就绪。
至于Google Analytics代码-按照您的示例，在底部放置它是个好习惯。
但它看起来加载更快了...设计首先出现=更快乐的用户！但你可能是对的！顺便问一下，我的代码或分析代码先执行？ - Jason Stackhouse
4
将脚本放在页面末尾可以提高性能。
引起脚本问题的原因是它们阻塞并行下载。HTTP/1.1规范建议浏览器每个主机名最多同时下载两个组件。如果您从多个主机名提供图像，则可以实现超过两个下载并行进行。然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。
重要的是要注意，在访问外部JS中引用的任何对象之前，必须先完全加载它们。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接