Javascript 我应该把 jQuery 脚本标签放在哪里？

Where do I put the jQuery script tag?

提问by Casey Chow

In all the documentation I see the jQuery script tag beneath <title>in the head, but then when I go into some other sites (the initializrtemplate is the first off the top of my head), they drop it into the bottom of the body (you know, right before </body>).

在所有文档中，我<title>在头部下方看到了 jQuery 脚本标签，但是当我进入其他一些站点时（initializr模板是我头顶上的第一个模板），它们将其放入正文的底部（您知道，就在之前</body>）。

Which of these two is right?

这两个哪个是对的？

采纳答案by rsp

Quoting the YDN Best Practices for Speeding Up Your Web Site:

引用 YDN 加速网站的最佳实践：

Put Scripts at the Bottom

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

将脚本放在底部

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

在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入页面的部分内容，则它不能在页面中移动到较低的位置。也可能存在范围界定问题。在许多情况下，有一些方法可以解决这些情况。

一个经常出现的替代建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会延迟，但不会像您希望的那样延迟。如果一个脚本可以被推迟，它也可以移动到页面底部。这将使您的网页加载速度更快。

It's funny that people used to say that I should be slapped upside the head for doing thatwhen I said that in 2009and now it's suddenly a best practice... Some progress.

有趣的是，当我在 2009 年这么说时，人们曾经说我应该因为那样做而被扇耳光，现在这突然变成了最佳实践……取得了一些进展。

回答by David Hoerster

Steve Souders' book High Performance Web Sitesrecommends putting scripts at the bottom, before the </body>tag. You can also find this documented at the developer.yahoo.com site here. (It's the fourth recommendation in the list.)

Steve Souders 的《高性能网站》一书建议将脚本放在底部，</body>标记之前。您还可以找到这在developer.yahoo.com现场记录在这里。（这是列表中的第四个建议。）

I generally put the scripts at the bottom, before my '' tag and have had few issues with this. I've noticed that this helps performance on older browsers like IE7 a lot more than it does with newer ones like FF3.6, Chrome and IE9. The older browsers only support 2 parallel downloads, whereas the newer ones support something 6 connections. The blocking, as a result, isn't as noticeable.

我通常将脚本放在底部，在我的 '' 标签之前，并且几乎没有问题。我注意到这比在 FF3.6、Chrome 和 IE9 等较新的浏览器上对 IE7 等旧浏览器的性能有更大的帮助。较旧的浏览器仅支持 2 个并行下载，而较新的浏览器支持 6 个连接。因此，阻塞并不那么明显。

Hope this helps!

希望这可以帮助！

回答by Jeremy Roy

Well, I think you need to put this inside a $(document).ready(function() {so that the document is actually ready before you are calling the jQuery. Personally I also put just before the </body>. Now given that both works, is there a 'right' way, or it's just a question of personal preference?

好吧，我认为您需要将其放入 a 中，$(document).ready(function() {以便在调用 jQuery 之前文档实际上已准备就绪。我个人也把</body>. 现在考虑到两者都有效，是否有“正确”的方法，或者这只是个人喜好的问题？

Would love to listen from experts, though.

不过，很想听听专家的意见。

回答by Wayne

Placing scripts at the bottom has performance benefits:

将脚本放在底部具有性能优势：

Where should I put <script> tags in HTML markup?

我应该将 <script> 标签放在 HTML 标记中的什么位置？