在 </body> 之前运行代码，而不是等待 DOM 就绪/DOMcontentloaded 事件答案

【问题标题】：Running code just before </body> instead of waiting for DOM ready/DOMcontentloaded event在 </body> 之前运行代码，而不是等待 DOM 就绪/DOMcontentloaded 事件
【发布时间】：2011-12-22 13:45:15
【问题描述】：

在关闭</body> 标记之前放置代码（将与DOM 交互、添加事件侦听器等）有什么缺点吗？

<!-- all the HTML comes before this -->
(function() {
  do_stuff_with_the_DOM();
})();
</body>

它似乎在我自己的测试中有效，但我从未在教程、代码示例或其他人的项目中看到这种方法。有理由不这样做吗？当您开始在生产中使用它并在各种浏览器中看到许多页面视图时，是否存在似乎只弹出的边缘情况？

我的项目不使用 jQuery 或任何其他工具包，并且我知道模仿 jQuery 的 $(document).ready() 功能的替代方案。我真的需要使用其中之一吗？（不言而喻，但我希望在window.load 之前运行代码。）

请注意，我要运行的代码（上面示例中的do_stuff_with_the_DOM()）将在外部脚本文件中定义，如果这样会有所不同的话。

【问题讨论】：

只要将JS代码放在script-tag中，其实是推荐的。
DOM 监听器和

标签： javascript dom

【解决方案1】：

你应该把你的 JavaScript 代码放在最适合它需要做的地方。在大多数情况下，您需要您的 js 将事件附加到 DOM 对象，如果这些 DOM 对象在 js 运行时不存在，这是很难想象的。所以把它放在html的底部是一种明智、简单、通用的做法。它是最好的吗？ That's arguable.

另一种方法是将 JavaScript 附加到 DOM 完全加载时不同浏览器触发的各种事件。这并没有错，尽管批评者不喜欢这样做，但它通常需要在 head 元素中额外阻塞 HTTP 请求。

Eventdelegation 提供了第三种方法，让您可以很早就将事件附加到父元素（例如 body），并且当存在适当的子事件时，事件将触发，就好像它们已被附加一样一直到这些元素。这是一个非常酷的方法theoretically the best early-loading performance 上面的任何一个，但是有一个陷阱，不是所有的事件都像你所期望的那样一直冒泡到顶部，并且它经常诱使你将 JavaScript 分成多个块，这可能会违反内容和行为的分离。

【讨论】：

【解决方案2】：

一般

将代码放在</body> 之前应该始终是目标。

强烈推荐，因为脚本下载（如果请求外部 JavaScript 文件）会阻止并行下载（即，在下载脚本时，不能同时下载其他脚本或图像） )。

您唯一遇到此问题的情况是，在某个糟糕的 CMS 系统中，您需要在 <head> 中就地放置 jQuery，以便它的某些脚本能够正常工作。

使用内联 JavaScript

将内联 JavaScript（或内联 CSS 代码）添加到页面通常是 considered bad practice，因为它是关注点的合并（即您不再真正分离 HTML/CSS/JS）。
如果您确实内联了所有代码，我想不出负面的性能问题 - 实际上 Google 将其用作一种做法（他们在一点注释中加载所有 JavaScript（以便不被解析）然后 @987654326 @ 这个“文本”blob 的元素在需要时使用。
但我要指出，现在不太可能有很多页面在某些时候不需要至少一个外部 JavaScript 文件（例如 JQuery、Mootools、Backbone 的 Underscore）。在这种情况下，由于您将始终拥有至少一个外部文件（除非您要使用 Google 路由），那么您不妨将两个外部引用和内联代码放在一起......在底部。创造一致性。

参考文献

【讨论】：

为什么要以内联JS为目标？你能支持一下吗？我很感兴趣。
@crolpa 抱歉，是的，我添加了更多内容，包括参考。
@crolpa 您如何将这个答案解释为 inline js？我没看到。
@beardtwizzle 感谢您的加入。现在将 JS 内联有助于减少额外的请求，但如果您在每个页面上都包含 Javascript，那么额外的请求又会被浏览器缓存 - 为最终用户提供更多好处。
太棒了 :) 完全不相关，但就我个人而言，我不喜欢在整个网站上使用 JS inline。除了混合语言之外，如果将该 JS 合并到一个相关文件中，则下载一次效率更高——实际上取决于具体情况。