Question

我想知道什么情况会迫使你在头部包含javascript而不是在身体结束之前？

我的意思是必需的脚本通常会在头部中做什么？

Answer 1

例如，他们可以触发AJAX请求以从服务器获取JSON数据，同时继续加载文档的其余部分。

Answer 2

请参阅Quirksmode.org上的最后一段 http://www.quirksmode.org/js/placejs.html

你的问题有点宽泛，所以这个答案也相当广泛。

Answer 3

只有document.write（）和脚本之间的依赖关系才会对页面中的脚本位置提出要求。

如果脚本提供了可以在<body>中的任何位置使用的方法，那么将脚本放在<head>中很方便，我相信这就是为什么脚本经常放在<head>中的原因}。

但是我想不出任何要求将脚本放在<head>中的原因。

Answer 4

如果你想在页面加载事件之前触发JavaScript代码，那么我认为这是唯一的条件。

Answer 5

HTML是一种自由文档语言，这就是它如此受欢迎的原因。您不是必需将脚本放在任何地方。

我的意思是必需的脚本通常会在头部中做什么？

通常，您首先在文档中包含您的库/扩展名。较大的网站不会打扰静态HTML页面，而是选择内容管理系统。 CMS往往是高度模块化的。允许在页面的各个区域中放置各种不同的内容类型。为了保持模块化，可以使用简单的内联脚本（特别是在使用jQuery时）：

<input id="super-special-date-field" type="text" name="ssdf" />
<script type="text/javascript">$('#super-special-date-field').datepicker();</script>

假设jQuery包含在页面中，这很有效，但如果它包含在底部，这个简单的脚本将引发错误。

你可以让你的脚本等待document.ready或window.onload，但更容易不等。

然后可以将任何非必要脚本放在页面底部。恕我直言，如果您的加载时间低于1秒，大多数人不会被加载时间困扰。

Answer 6

我通常在<head>中添加的最重要的事情是基本的早期事件处理。因此，我从一开始就捕获每个事件，并在DOM和适当的事件处理程序完全加载时执行它们。

到<head>

var earlyEvents = { ... };

// catch every user event, even
// before the DOM is fully loaded
document.onclick = function(event) {
  earlyEvents.register("click", event);
};

DOMContentLoaded处理程序

// execute them when the page is ready
earlyEvents.executeAll();

jQuery可能在<head>中不可用，因此earlyEvents必须保存/复制事件对象，因为它们仅在第一次执行时才处于活动状态。您可以在executeAll中使用简单循环和trigger。

Facebook与 Primer

类似

当javascript必须包含在标记中而不是之前？

6 个答案: