JavaScript - 头部、主体还是 jQuery？答案

【问题标题】：JavaScript - head, body or jQuery?JavaScript - 头部、主体还是 jQuery？
【发布时间】：2012-06-15 04:45:16
【问题描述】：

这个问题只是为了澄清一些事情。以前有人问过这样的问题，这将它们全部归结为一个问题 - 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。所以我知道如果你在你的body里面放document.getElementById("test").innerHTML = "Hello world!"之前<element id="test"></element>这样的东西，那么它就不起作用了，因为body是从上到下加载的，首先加载JS，然后它会继续尝试操作一个尚不存在的元素。所以它应该像上面一样，要么进入<head>，要么就在</body>标签之前。问题是，除了组织和排序之外，选择其中的哪一个是否重要？如果是，以什么方式？

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

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

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

【问题讨论】：

所以问题Where should I declare JavaScript files used in my page? In <head></head> or near </body>? 没有为您澄清？无论如何，如果您对ready 的功能感兴趣，您可以查看源代码并在需要时复制它。
您的“jQuery 方法”可以使用原生 JavaScript 完成：window.onload = function(){} -- 无需库
@Felix - ：对不起，一定是错过了。另外，既然我在问这个问题，你可能会发现我在 JS 方面有点菜鸟，所以我无法想象自己会尝试浏览 jQuery 源代码：P
@all the answers - 所以你说把脚本放在头上会减慢页面的加载速度；这是否意味着如果我有很多很多的 JS，我应该把它放在</body> 之前，如果我有几行，我可以把它插在头上，因为这不会减慢太多？

标签： javascript jquery html

【解决方案1】：

最推荐的方法是把它放在</body>标签之前。 Yahoo performance article 还建议除了 YSlow 和 Page Speed 分别由 Yahoo 和 Google 提供的插件。

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

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

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

至于：

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

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

【讨论】：

这是一个很好的答案，但是如果您需要在包含 jquery 之前的表上使用 $("td.speical-format").live() 之类的东西，该怎么办？
如果你要把它放在最后，那么总是使用微调器/加载器。这是因为如果你的 css/js 很大或很大，那么一些依赖于 jquery 的东西不会工作...
根据你的观点，你说我们应该在底部下载 JS 库文件。除非我们使用异步，否则它将是一个渲染阻塞 JavaScript。但是 JS 库文件应该在绘制过程完成后准备好，以便自定义 JavaScript（例如：document.ready()）运行它们的功能不是吗？

【解决方案2】：

虽然很常见，但将script 标签放在head 中通常不是一个好主意，因为它会在下载和处理这些脚本之前保持页面的呈现（除非您使用async 或defer 和支持它们的浏览器）。

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

使用像 jQuery 的 ready 这样的特性很好，但在库之外并不是真正需要的（例如，如果你可以控制 script 标记的位置，你通常不需要使用它；但是如果您正在编写一个需要在加载时执行某些操作的 jQuery 插件[这比较少见，通常它们只是等待被调用]，您通常会这样做）。

更多阅读：

【讨论】：

所以如果我正在制作一个集成了 JS 的应用程序，我应该使用内联钩子；如果一个人正在制作 Chrome 扩展程序（不允许使用内联 JS）怎么办？
@Bluefire：我没有说你应该，只是说这是防御短暂间隔的一种方法。你是说你不能在 Chrome 扩展程序中使用<script>code here</script>？
不 :D 我是说你不能做像<span oncick="yourEvent()"></span> 这样的事情。我以为这就是您所说的“内联”。
@Bluefire：啊，抱歉，我的意思是在 script 元素中直接包含其代码而不是引用单独的脚本文件。

【解决方案3】：

可以通过执行以下操作并行下载 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 http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp 有一个非常好的 Google 技术讨论

【讨论】：