优点和缺点：将 javascript 放在头部并在身体关闭之前放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2451417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's Pros and Cons: putting javascript in head and putting just before the body close
提问by Amr Elgarhy
Most of javascript and web development books/articles says that you must put CSS in the head tag and javascript at the bottom of the page.
大多数 javascript 和 web 开发书籍/文章都说您必须将 CSS 放在 head 标签中，并将 javascript 放在页面底部。
But when I open html source of famous websites such as this one stackoverflow, I find they put some js files in the head tag.
但是当我打开像这个stackoverflow这样的著名网站的html源代码时，我发现他们在head标签中放了一些js文件。
What's Pros and Cons of both approaches and when to use which?
两种方法的优缺点以及何时使用哪种方法？
Found another question for the same issue:Where should I declare JavaScript files used in my page? In <head></head> or near </body>?
找到了针对同一问题的另一个问题：我应该在哪里声明页面中使用的 JavaScript 文件？在 <head></head> 中还是在 </body> 附近？
采纳答案by David Johnstone
From Yahoo's Best Practices for Speeding Up Your Web Site:
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 中，脚本可能会延迟，但不会像您期望的那样延迟。如果一个脚本可以被推迟，它也可以移动到页面底部。这将使您的网页加载速度更快。
Therefore, in general, it is preferrable to put them at the bottom. However, it isn't always possible, and it often doesn't make thatmuch of a difference anyway.
因此，一般情况下，最好将它们放在底部。然而，它并不总是可能的，而且往往不会使该多大的差别呢。
回答by AHM
As other people have said, when you put javascript in the head it delays the rendering of the page until after the scripts have loaded, which means the page may take longer to load - especially if you are downloading large script files.
正如其他人所说，当您将 javascript 放在头部时，它会延迟页面的呈现，直到脚本加载后，这意味着页面可能需要更长的时间来加载 - 特别是如果您正在下载大型脚本文件。
If you move your script tags to the end of the page, you will ensure that the browser downloads images and stylesheets before the script tags and the page will likely apear to be rendered before the scripts start to run. This also means that if you are depending on some functionality from your scripts, this will not be available until a bit after the page is visible to the user.
如果您将脚本标签移到页面末尾，您将确保浏览器在脚本标签之前下载图像和样式表，并且页面可能会在脚本开始运行之前呈现。这也意味着，如果您依赖于脚本中的某些功能，则在页面对用户可见后不久才可用。
If you are adding styles or elements (etc. switching textfields with some form of richer editor) this will be visible to the user as flickering.
如果您正在添加样式或元素（等。使用某种形式的更丰富的编辑器切换文本字段）这将对用户显示为闪烁。
If you are adding click-events to elements, they will not be clickable until a bit after the elements themselves are visible.
如果您向元素添加点击事件，则在元素本身可见之后，它们将无法点击。
Sometimes theses issues requires you to put your scripts in the head, other times you will be fine by sticking them in the bottom.
有时这些问题需要你把你的脚本放在头上，其他时候你把它们放在底部就可以了。
IMHO (completely against YSlow and lot's of clever people) you should keep your scripts in the head tag, and just rely on them to be cached most of the time.
恕我直言（完全反对 YSlow 和很多聪明人）你应该将你的脚本保存在 head 标签中，并且大部分时间都依赖它们被缓存。
回答by Chris Love
In general you should place script references at the bottom of your page. Scripts not only need to be downloaded, they must also be evaluated and executed before the block is released and the page proceeds with the rendering process. Things like Modernizr should be placed in the top because it does some feature detections as well as HTML5 shims that you will probably want.
通常，您应该将脚本引用放在页面底部。脚本不仅需要下载，还必须在块释放和页面继续渲染过程之前评估和执行。Modernizr 之类的东西应该放在顶部，因为它会进行一些功能检测以及您可能需要的 HTML5 填充程序。
Another reason you want to try to place scripts at the bottom of the page is Single Points of Failure or SPOFs. This is where a script call times out or for some other reason blocks the page execution. This can happen a lot with third party advertising libraries, etc.
您想尝试将脚本放在页面底部的另一个原因是单点故障或 SPOF。这是脚本调用超时或由于某些其他原因阻止页面执行的地方。第三方广告库等可能会经常发生这种情况。
Yes you may have to think a little harder about how you architect your application, but I found it to become very natural very quickly for me. I have built hundreds of web apps over the past 4 years with the script at the bottom and I can tell the difference. I may be 500ms it might be 5000ms but it all matters.
是的，您可能需要更努力地思考如何构建应用程序，但我发现它对我来说很快变得非常自然。在过去的 4 年中，我使用底部的脚本构建了数百个 Web 应用程序，我可以分辨出其中的区别。我可能是 500 毫秒，也可能是 5000 毫秒，但这一切都很重要。
回答by azamsharp
It really depends on your website. If you are accessing and invoking the JavaScript functions inside the body then it must be referenced in the header so that is is loaded. Else if you are only going to call the JavaScript when the whole document is loaded then it is wise to put the JavaScript at the end of body. By putting .JS file at the end you load the whole page and then fetch the .JS file. This way the user will be able to quickly see the page and by the time he/she gets familiar with the page the .JS file has already been downloaded.
这真的取决于你的网站。如果您正在访问和调用主体内的 JavaScript 函数，则必须在标头中引用它，以便加载。否则，如果您只想在加载整个文档时调用 JavaScript，那么将 JavaScript 放在正文的末尾是明智的。通过将 .JS 文件放在最后，您可以加载整个页面，然后获取 .JS 文件。这样，用户将能够快速查看页面，并且当他/她熟悉页面时，.JS 文件已经下载。
回答by Draemon
Any javascript in the head will be evaluated before the page is loaded, meaning the page feels like it takes longer to load. It is slightly harder to get events to work properly if all the javascript is at the end, but jQuery pretty much solves this problem for you.
在页面加载之前，head 中的任何 javascript 都会被评估，这意味着页面感觉需要更长的时间来加载。如果所有的 javascript 都在最后，让事件正常工作会稍微困难一些，但 jQuery 几乎为你解决了这个问题。
