JavaScript 应该放在哪里？答案

【问题标题】：Where should JavaScript be put?JavaScript 应该放在哪里？
【发布时间】：2010-04-18 01:36:00
【问题描述】：

我已经做了一段时间的 JavaScript（好吧，更像是 jQuery），我一直困惑的一件事是我应该把我的脚本放在哪里，在 <head> 标记或 @ 987654323@标签。

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

【问题讨论】：

你能在标签里还是在标签里说清楚？
“在标签中”是指在<body> 和</body> 标签之间。 <head> 也是如此。
stackoverflow.com/questions/1013112/…的可能重复

标签： javascript jquery coding-style

【解决方案1】：

google 和 yahoo 的最佳实践表明，为了提高性能，javascript 应始终放在外部文件中，并使用位于 html 底部的 <script> 标记链接到您的页面，就在前面<body> 元素的关闭。

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

【讨论】：

这个问题是渲染了一个“无功能”的页面。顺便说一句，我们都有相同的代表是巧合吗？ (1666)
Re: 'functionless': 你的页面应该在没有 JS 的情况下仍然可以工作。页面渲染和 JS 评估之间可能只有 1/2 秒到 1 秒（希望如此）。
这就是我想知道的。如果出于某种原因，我将 JavaScript 放在 <head> 标记中，与将其放在 <body> 标记开头相比会有什么不同吗？
不，您可以从 body 或 head 元素加载脚本。请小心，因为您越早加载脚本，它就会越早阻止您的页面加载。

【解决方案2】：

你提到了三个地方：

在标签中；
在 HTML 中；和
在外部文件中。

让我逐一说明。

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

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

第一个给你一点缓存提升。第二个可能有可怕的页面加载时间。

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

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

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

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

这样可以以最好的方式（恕我直言）混合外部文件和页内脚本。

你提到的最后一个地方是在标签中。这在一定程度上取决于您使用的 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);
});

【讨论】：

您的意思是 $('#dostuff').click(doStuff); 基于您的 HTML。 =) 感谢您的精彩描述！
我实际上用 PHP 比 JS 做了更多的工作，当你在开始时描述的将重要函数保存在单个文件中的行为时，它让我想起了我如何组织我的 PHP 函数——比如那！当我编写我的 jQuery 代码时，它永远不会出现在我的标签中。我真正的问题是我应该将<script src="file.js"> 标记放在代码中的什么位置。