62

这个问题只是为了澄清一些事情。以前有人问过这样的问题，这会将它们全部归结为一个问题 - 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 是否值得仅仅为 ready 事件？

4

3 回答 3

60

最推荐的方法是把它放在</body>标签之前。雅虎性能文章还建议除了雅虎和谷歌的YSlow和Page Speed插件之外。

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

脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。

当您将脚本放入<head>标记中时，浏览器会选择它们，从而保持其他内容处于暂停状态，直到加载脚本，用户会觉得页面加载缓慢。这就是为什么你应该把脚本放在底部。

至于：

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

当 DOM 可用并准备好被操作时，它会被触发。如果将代码放在最后，则不一定需要它，但通常需要它，因为您想在DOM 可用时立即执行某些操作。

于 2012-06-12T10:03:58.283 回答
29

尽管通常的做法是，在 中放置script标签head通常不是一个好主意，因为它会阻止页面的呈现，直到这些脚本被下载和处理（除非您使用asyncordefer和支持它们的浏览器）。

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

使用 jQuery 之类的特性ready很好，但在库之外并不是必需的（例如，如果您可以控制script标签的位置，通常不需要使用它；但如果您正在编写 jQuery 插件 -因为需要在加载时做一些事情[这是相对罕见的，通常他们只是等待被调用]，你通常会这样做）。

更多阅读：

于 2012-06-12T10:05:13.027 回答
7

可以通过执行以下操作并行下载 javascript：

(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，如果用户访问过使用相同文件的页面，它可能会被缓存并因此不需要下载

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

于 2012-06-12T10:46:23.770 回答