你什么时候把 Javascript 放在 body 里，什么时候放在 head 里，什么时候使用 doc.load？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14328449/
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
When do you put Javascript in body, when in head and when use doc.load?
提问by Sander Schaeffer
Possible Duplicate:
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?
I've always wondered, mainly because when creating pages I always run into trouble, based on the following thing:
我一直想知道，主要是因为在创建页面时我总是遇到麻烦，基于以下几点：
When do you write your javascript
你什么时候写你的javascript
- In the
<head> - In the
<body> - with a
$(document).ready()
- 在里面
<head> - 在里面
<body> - 与
$(document).ready()
I could be stupid, but I've had a few times when my JavaScript (/jQuery) wasn't executed because of the wrong place or yes or no doc.ready()command. So I'm really wondering so.
我可能很傻，但我有几次我的 JavaScript (/jQuery) 没有执行，因为错误的地方或者是或否doc.ready()命令。所以我真的很想知道。
Same goes for jQuery and 'var' command
jQuery 和“var”命令也是如此
采纳答案by Kyle
$(document).ready()simply ensures that all DOM elements are loaded before your javascript is loaded.
$(document).ready()只需确保在加载 javascript 之前加载所有 DOM 元素。
When it doesn't matter
无所谓的时候
Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:
无需等待此事件触发，您最终可能会操作页面上尚不存在的 DOM 元素或样式。DOM 就绪事件还允许您更灵活地在页面的不同部分运行脚本。例如：
<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvementsby placing your scripts at the bottom of the page.
将运行，因为地图 div 已在脚本运行之前加载。事实上，您可以通过将脚本放在页面底部来获得一些非常好的性能改进。
When it does matter
当它确实重要时
However, if you are loading your scripts in the <head>element, most of your DOM has not loaded. This example will not work:
但是，如果您在<head>元素中加载脚本，则大部分 DOM 尚未加载。这个例子不起作用：
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>
will not, since the map div has not been loaded.
不会，因为地图 div 尚未加载。
A safe solution
一个安全的解决方案
You can avoid this by simply wait until the entire DOM has loaded:
您可以通过简单地等待整个 DOM 加载来避免这种情况：
<script type="text/javascript">$(document).ready(function () {
document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>
There are plenty of articlesthat explain this, as well as the jQuery documentationitself.
回答by Pointy
By modern "best practice", it's like this:
通过现代“最佳实践”，它是这样的：
- Put scripts in the
<head>when they should happen before the page starts being rendered. Examples are things like HTML 5 shim libraries or Modernizr. - Put scripts in "ready" handlers when there's limited control over how the script is imported. Things like utilities that can be included on a page to unobtrusively add features generally use "ready" handlers because they can't be sure of how they'll be used.
- Put scripts at the end of the
<body>if you can get away with it in all other cases.
- 将脚本放在
<head>它们应该在页面开始呈现之前发生的时间。例如 HTML 5 shim 库或 Modernizr。 - 当对脚本导入方式的控制有限时，将脚本放入“就绪”处理程序中。可以包含在页面中以不显眼地添加功能的实用程序之类的东西通常使用“就绪”处理程序，因为它们无法确定将如何使用它们。
<body>如果您可以在所有其他情况下摆脱它，请将脚本放在末尾。
Sometimes you end up with dependencies in pages that require things that you'd otherwise like to load at the end of the body element. That's an undesirable situation, but if you can't avoid it that can force scripts to be loaded in the <head>instead of at the end of the <body>.
有时，您最终会在页面中产生依赖项，这些依赖项需要您希望在 body 元素末尾加载的内容。这是一种不受欢迎的情况，但如果您无法避免这种情况，则可能会强制将脚本加载<head>到<body>.
It's good to load things at the end of the document because browsers evaluate the contents of <script>tags when they load them. (There are some "modern" ways to avoid this, but that's getting into more complicated territory.)
最好在文档末尾加载内容，因为浏览器<script>在加载标签时会评估标签的内容。（有一些“现代”方法可以避免这种情况，但这已经进入了更复杂的领域。）
The decision of when to use "ready" handlers (or "load" handlers, for that matter) is a little different than the decision about where to put the <script>tag. If you've got intra-page widgets from a server-side template system that generate (undesirable, but what can you do?) jQuery references for example, then you need to import jQuery at the top of the page, even though other code may defer initialization to "ready" handlers. That is to say, the decision about when to use "ready" has to do with whether your script is willing to rely on being imported into a page at the right point, or if it wants to ensure that the right thing happens regardless of where its <script>tag is placed.
何时使用“就绪”处理程序（或“加载”处理程序，就此而言）的决定与关于放置<script>标签的位置的决定略有不同。例如，如果您从服务器端模板系统获得了生成（不受欢迎，但您能做什么？）jQuery 引用的页面内小部件，那么您需要在页面顶部导入 jQuery，即使其他代码可能会将初始化推迟到“就绪”处理程序。也就是说，关于何时使用“就绪”的决定与您的脚本是否愿意依赖于在正确的时间点导入页面有关，或者它是否想确保无论在哪里都发生正确的事情它的<script>标签被放置。
回答by ppp
It is a matter of when you need the code to be executed.
这是您何时需要执行代码的问题。
If you are going to manipulate the DOM tree (e.g. move elements around/ show-hide etc) and you put your code in the head of your document, your elements will not be there when your code is executed, therefore your code will not work.
如果您要操作 DOM 树（例如移动元素/显示隐藏等）并将代码放在文档的头部，则执行代码时元素将不在那里，因此您的代码将无法工作.
In that case you can put your code in the head of your document and invoke it when the document DOM is ready, with $(document).ready()
在这种情况下，您可以将代码放在文档的头部，并在文档 DOM 准备就绪时调用它，使用 $(document).ready()
Putting code at the end of your document is rarely necessary, one occasion I can think of is google plus +1 button, that requires you to place a script after the last +1 button, so you just stick it to the end of your document to be sure.
很少需要将代码放在文档末尾，我能想到的一种情况是 google plus +1 按钮，这需要您在最后一个 +1 按钮之后放置一个脚本，因此您只需将其粘贴到文档末尾即可为了确定。
