Question

在结束</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()）将在外部脚本文件中定义，如果这会产生影响。

Answer 1

一般

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

强烈推荐，因为下载脚本（如果请求外部JavaScript文件）阻止并行下载（即在下载脚本时，没有别的 - 例如，另一个脚本或图像 - 可以同时下载）。

唯一一次你应该遇到这个问题，就像是一个糟糕的CMS系统，你需要在<head>中就地使用jQuery才能让它的某些脚本工作。

使用内联JavaScript

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

参考

Answer 2

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

另一种方法是将JavaScript附加到DOM完全加载时不同浏览器触发的各种事件。这没有任何问题，虽然批评者不喜欢它通常以需要head元素中的额外阻止HTTP请求的方式完成。

事件委派提供了第三种方法，可以让您很早地将事件附加到父元素（例如body），并且当存在适当的子事件时，事件将像它们一样触发一直依附于这些元素。对于上述任何一个theoretically the best early-loading performance来说，这是一个非常酷的方法，但是有一个陷阱，因为并非所有事件都像你期望的那样一直冒到顶端，并且它经常诱惑你分开你的JavaScript分为多个块，这可能违反内容和行为的分离。

之前运行代码而不是等待DOM ready / DOMcontentloaded事件

2 个答案:

一般

使用内联JavaScript

参考