javascript 在哪里放置 $(document).ready(function()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17659121/
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
Where to place $(document).ready(function()?
提问by MEM
We often read here and there, that we must place our js code either on the page head section or before(sorry) the end body tag. Discussions about this aside, I'm just looking to know what are the reading order for such things by the browsers (taking that they do act as equals here):
我们经常读到这里和那里，我们必须要么把我们的js代码在页面头部或之前（对不起）结束body标签。撇开关于这个的讨论不谈，我只是想知道浏览器对这些东西的阅读顺序是什么（假设它们在这里充当平等）：
Can we place:
我们可以放置：
$(document).ready(function(){
No matter where on the page structure, because we are using $(document).readyor should we still place it on the head section ?
无论在页面结构的哪个位置，因为我们正在使用$(document).ready还是应该将其放在head部分？
Can anyone please clarify this.
任何人都可以请澄清这一点。
If my question isn't clear, I can rephrase.
如果我的问题不清楚，我可以改写。
回答by Chris Baker
You can place ascript anywhere in the document. Best practice usually advises placing scripts in the footer for page load performance concerns. Further, best practice usually advises placing the scripts together for ease of maintenance.
你可以把一个文档中的脚本的任何地方。最佳实践通常建议将脚本放在页脚中以解决页面加载性能问题。此外，最佳实践通常建议将脚本放在一起以便于维护。
However, per the spec, there is no restriction on where in the document you place a scripttag. You may place them together in the header, at the bottom of the body, sprinkled all over the document, or any combination thereof.
但是，根据规范，对在文档中放置script标签的位置没有限制。您可以将它们一起放在标题中、正文底部、散布在整个文档中，或者它们的任意组合。
The use of the jQuery construct $(document).readyhas the same result regardless of where it is placed within the document. The key is to understand the functionality behind this construct:
jQuery 构造的使用$(document).ready具有相同的结果，无论它放置在文档中的什么位置。关键是要了解此构造背后的功能：
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.
虽然 JavaScript 提供了用于在呈现页面时执行代码的 load 事件，但在完全接收到所有资产（例如图像）之前不会触发此事件。
So, readyis similar to document.onload, but not the same. It doesn't matter where the code is, if you execute it when document.onloadis fired or when jQuery fires ready. Code's placement in a document is only significant if it is NOT wrapped by some event handler/listener.
所以，ready类似于document.onload，但又不一样。代码在哪里都没有关系，是在document.onload被触发时还是在 jQuery 触发时执行它ready。代码在文档中的位置只有在它没有被某些事件处理程序/侦听器包装时才有意义。
The only restriction on the location on $(document).readyis that it cannot happen before you include the jQuery library. $(document).readyis using jQuery, so if jQuery doesn't exist.... you can't use it.
对位置的唯一限制$(document).ready是它不能在您包含 jQuery 库之前发生。$(document).ready正在使用 jQuery，所以如果 jQuery 不存在......你不能使用它。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
alert('executed as soon as it is reached (as the document is downloaded)');
$(document).ready(function () { alert('on jQuery ready'); });
</script>
</head>
<body onload="alert('executed on document.onload event');">
<script>
alert('executed as soon as it is reached (as the document is downloaded)');
$(document).ready(function () { alert('on jQuery ready'); });
</script>
</body>
</html>
Documentation
文档
- SCRIPT specification at W3 - http://www.w3.org/TR/html401/interact/scripts.html
- script (html 5) specification at W3 - http://www.w3.org/TR/html-markup/script.html
- Placing Javascript in your pagesat quirksmode - http://www.quirksmode.org/js/placejs.html
- Jquery
ready- http://api.jquery.com/ready/
- W3 的 SCRIPT 规范 - http://www.w3.org/TR/html401/interact/scripts.html
- W3 的脚本 (html 5) 规范 - http://www.w3.org/TR/html-markup/script.html
- 在 quirksmode的页面中放置 Javascript- http://www.quirksmode.org/js/placejs.html
- Jquery
ready- http://api.jquery.com/ready/
回答by Sunny
AFAIK, $(document).readyevent gets raised after DOM is completely loaded so it doesn't matter where you place it.
AFAIK，$(document).ready事件在 DOM 完全加载后引发，因此放置它的位置无关紧要。
But they say to write the script at end of the body because page will show up to the end user instantly and javascript will continue to run as background process.
但是他们说要在正文的末尾编写脚本，因为页面会立即显示给最终用户，并且 javascript 将继续作为后台进程运行。
回答by Sunny
The browser executes the script from the top to the bottom, so the srcipt in the head section will execute before the script in the body. I prefer to put the script undernith the html code, but generally it desn't matter much if you vait for the page to fuly load.
浏览器从上到下执行脚本，所以 head 部分的 srcipt 会先于 body 中的脚本执行。我更喜欢将脚本放在 html 代码之下，但通常情况下，如果您不希望页面完全加载，则无关紧要。
回答by jaruesink
The document ready function will wait until the DOM is loaded before running. So technically it doesn't matter where you put it. Many people like putting script in the head, because it makes sure the script is read before the page is loaded. Other people like putting it at the very end (just before the end body tag) so that all of the elements of the page are loaded before the script reads them. But since you're waiting for the DOM to load anyway, it doesn't matter.
文档就绪函数将等待 DOM 加载后运行。所以从技术上讲，你把它放在哪里并不重要。许多人喜欢将脚本放在头部，因为它可以确保在加载页面之前读取脚本。其他人喜欢把它放在最后（就在结束 body 标签之前），以便在脚本读取它们之前加载页面的所有元素。但既然你一直在等待 DOM 加载，那就无所谓了。
If you have a small function, then I would just put the document ready function in the head tags.
如果您有一个小功能，那么我会将文档就绪功能放在 head 标签中。
回答by jaruesink
As far as i know, the BKM is to place it in the footer (although mostly developers tend to place it in the head tag). Main reason - most of the document DOM is rendered to the browser prior to loading JS.
据我所知，BKM 是将它放在页脚中（尽管大多数开发人员倾向于将它放在 head 标签中）。主要原因 - 大多数文档 DOM 在加载 JS 之前呈现给浏览器。
