Question

我已经做了一点JavaScript（好吧，更像是jQuery）一段时间了，我一直困惑的一件事是我应该把我的脚本放在<head>标签中或者<body>代码。

如果有人能澄清这个问题，那就太好了。应该去哪里的一个例子是完美的。

Answer 1

来自google和yahoo的最佳做法表示，为了提高性能，应始终将javascript放在外部文件中，并使用位于底部的<script>标记链接到您的网页在关闭<body>元素之前的html。

这允许浏览器立即呈现整个页面，而不是停止评估javascript。

Answer 2

你提到了三个地方：

在代码中;
在HTML中;以及
在外部文件中。

让我解释其中的每一个。

最佳做法是在一个或多个外部文件中使用通用 Javascript，并且文件越少越好，因为加载的每个JS文件都会阻止加载页面，直到加载JS文件为止。

“共同”这个词非常重要。这意味着您不希望将特定于页面的Javascript代码放在该外部文件中以用于缓存原因。假设您有一个包含1000页的网站。每个页面都有特定于它的JS代码。这可能是1000个不同的文件，或者是一个执行大量不必要代码的非常大的文件（例如，查找不在该特定页面上但在999个其中一个上的ID）。这些结果都不好。

第一个提供了很少的缓存提升。第二个可能有可怕的页面加载时间。

所以你要做的就是将所有常用函数放在一个JS文件中，其中只有的JS文件包含函数。在每个HTML页面中，您可以调用该页面所需的JS函数。

理想情况下，您的JS文件也可以有效缓存。最佳做法是使用远期期货HTTP Expires标头和版本号，这样JS文件只会被每个浏览器加载一次，无论他们访问多少页面。更改文件时，您更改版本号并强制重新加载。使用mtime（JS文件的最后修改时间）是一种常见的方案，提供如下的URL：

<script type="text/javascript" src="/js/script.js?1233454455"></script>

自动生成mtime。您的Web服务器配置为使用适当的Expires标头提供JS文件。

这样就可以以最好的方式混合外部文件和页内脚本（imho）。

你提到的最后一个地方是标签。这在某种程度上取决于您使用的JS库和框架。我是jQuery的忠实粉丝，它鼓励不引人注目的Javascript 。这意味着您（希望）不会在您的标记中添加任何Javascript 。所以而不是：

<a href="#" onclick="doStuff(); return false;">do stuff</a>

<a href="#" id="dostuff">do stuff</a>

使用Javascript：

$(function() {
  $("#dostuff").click(doStuff);
});

JavaScript应该放在哪里？

2 个答案: