JavaScript应该放在哪里？

Question

我已经做了一段时间的JavaScript（嗯，更像jQuery），我一直感到困惑的一件事是我应该将脚本放在<head>标记还是<body>标记中。。

如果有人可以澄清这个问题，那就太好了。 一个完美的例子。

Answer 1

谷歌和雅虎的最佳实践表明，为了提高性能，应始终将javascript放在外部文件中，并在<body>关闭之前，使用位于html底部的<script>标签将其链接到您的页面。元件。

这使浏览器可以立即呈现整个页面，而不必停止评估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 个解决方案

解决方案1
11 已采纳 2010-04-18 01:39:17

解决方案2
9 2010-04-18 01:48:08

JavaScript应该放在哪里？

问题描述

2 个解决方案

解决方案1 11 已采纳 2010-04-18 01:39:17

解决方案2 9 2010-04-18 01:48:08

解决方案1
11 已采纳 2010-04-18 01:39:17

解决方案2
9 2010-04-18 01:48:08