Question

这个问题只是为了澄清一些问题。之前已经提出了类似这样的事情，这将它们全部归结为一个问题 - JavaScript应该放在HTML文档中，或者更重要的是，它是否重要？所以，我要问的其中一件事是，

<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>

与

完全不同（就功能而言）

<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>

更重要的是，我想专注于以任何方式修改或使用DOM元素的JS。所以我知道，如果你在document.getElementById("test").innerHTML = "Hello world!"之前放置<element id="test"></element>之类的东西，那么它将不起作用，因为身体从上到下加载，使得JS首先加载，然后继续试图操纵一个尚不存在的元素。因此，就像上面一样，它应该放在<head>或</body>标记之前。问题是，除了组织和排序之外，选择哪一个是否重要，如果选择，以何种方式？

当然，还有第三种方法 - jQuery方式：

$(document).ready(function(){ /*Code goes here*/ });

这样，放置代码的正文在哪里都没关系，因为它只会在所有内容都加载时执行。这里的问题是，是否值得导入一个巨大的JS库只是来使用一种方法，可以用准确放置脚本来替换它？我想在这里澄清一点，如果你想回答，请继续！总结：不同类型的脚本应该放在哪里 - 头部或身体，和/或它是否重要？ jQuery是否值得为现成的事件做点什么？

Answer 1

最推荐的方法是将其放在</body>标记之前。除了雅虎和谷歌分别为Yahoo performance article和YSlow插件外，Page Speed也提出了建议。

引用上面链接的雅虎文章：

脚本导致的问题是阻止并行下载。 HTTP / 1.1规范表明浏览器不再下载每个主机名并行两个组件。如果您提供图像从多个主机名，您可以获得两次以上的下载在平行下。但是，在下载脚本时，浏览器不会即使在不同的主机名上，也可以启动任何其他下载。

当你将脚本放在<head>标签中时，浏览器为它们提供服务，从而保持其他内容保持不变，直到加载脚本，用户会感觉像页面加载缓慢。这就是你应该把脚本放在底部的原因。

至于：

$(document).ready(function(){/*Code goes here*/});

当DOM可用并准备好进行操作时会触发它。如果你把代码放在最后，你不一定需要这个，但通常这是必需的，因为只要 DOM可供使用，你就想做的事情。

Answer 2

虽然通常的做法是将script标记放在head中通常不是一个好主意，因为它会阻止您的网页呈现，直到这些脚本被下载和处理（除非您使用async或defer以及支持它们的浏览器。

通常的建议是将script标记放在body标记的最后，例如</body>之前。这样，脚本上方的所有DOM元素都可以访问（参见下面的链接）。有一点需要注意的是，可能会有一个短暂的时刻，您的页面至少部分呈现，但您的脚本尚未处理（尚未），如果用户开始与页面交互，他们可能会做一些事情来提出一个事件，你的脚本还没时间挂钩。所以你需要意识到这一点。这是渐进增强的一个原因，这就是这个页面在没有JavaScript的情况下工作的想法，但是它可以更好地工作。如果您正在执行的页面/应用程序在没有JavaScript的情况下将无法运行，您可以在body标记的顶部添加一些内联脚本（例如{{1}挂起<script>minimal code here</script>上的任何冒泡事件，并在加载脚本时将它们排队等待操作，或者只是要求用户等待。

使用像jQuery的document.body这样的功能很好，但在库之外并不是必需的（例如，如果你控制ready标签的位置，你通常不需要使用它;但是如果你正在编写一个需要在加载时做某事的jQuery插件[这种情况相对较少，通常它们只是等待被调用]，你通常会这样做。

更多阅读：

Answer 3

可以通过以下方式并行下载javascripts：

(function () {
    var ele = document.createElement('script');
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    ele.id = "JQuery";
    ele.onload = function () {
        //code to be executed when the document has been loaded
    };
    document.getElementsByTagName('head')[0].appendChild(ele);
})();

在示例中，它从Google下载缩小的JQuery v1.7.2，这是下载JQuery的好方法，因为从Google下载它就像使用CDN一样，如果用户已经在使用相同文件的页面上被缓存，因此不需要下载

这里有一个非常好的Google技术讨论http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp

JavaScript - head，body还是jQuery？

3 个答案: