关于jquery：＆lt; head＆gt;中应该包含哪些JavaScript

What JavaScript should be included in the <head> and what included in the <body>?

我对应该在哪里包含哪些javascript感到困惑？

例如:

应该在哪里包含jquery库？在或在结束元素之前？
如果javascript是在的底部定义的，那么它可以在主体中内联使用吗？
如果它阻止了并行下载，那么为什么它从来没有说在底部包含您的CSS？

相关讨论

CSS

CSS被加载到中，以防止非样式内容(fouc)的闪现，这种情况下，您的页面在一瞬间没有样式显示。在中加载它们是一个微小的牺牲，可以确保在呈现内容时页面看起来完美。

JS一般情况：

JS在底部加载有几个原因(但不限于以下原因)：

这样它就不会阻止加载其他资源和呈现页面。
JS的传统用法是用于增强，如客户端验证和小的特殊效果。这些通常是可选的，不会影响页面的总体用途。因此，它们是最后加载的。
在内容之后添加脚本可以确保脚本引用的元素被安全地访问，因为它们已经在DOM上了。

例外情况：

但也有一些例外，比如：

像现代化一样的"飞行前图书馆"
Modernizer在标记上应用类以表示功能的可用性，这些功能可用于JS和CSS目的。延迟这可能会导致由于类添加而突然改变样式，以及由于检查之前没有完成而损坏JS。
CSS解析器喜欢less/sass和影响样式的脚本
远程LESS/SASS样式是通过Ajax加载的，因此不管样式是否准备好，都会呈现页面。把它们装在头上会使它们尽早地装上样式，以避免出现FOUC。
像requirejs这样的"bootloader库"需要尽早加载，以便并行下载其他脚本。
Web应用程序需要JS作为平台。最好在最早的时候加载这些库。此外，在webapp中，在应用程序运行之前有最少的页面内容。

边缘案例：

这里也有两个值得一提的脚本属性，分别是defer和async。

基本上，其思想是只有在解析了DOM之后才能运行带有defer的脚本标记，并且带有async的脚本标记异步加载脚本，而不会阻塞其他操作。这意味着您可以在头部使用脚本，应用async并行加载脚本，以及defer确保在执行时DOM已就绪，但每个脚本都有自己的问题。

这里有一个MDN文档，可以解释更多关于它们是什么的信息，以及一个关于它们的历史、支持和当前状态的答案。

相关讨论

元素的位置

脚本元素阻止渐进式页面下载。
浏览器一次下载几个组件，但是当它们遇到外部脚本时，它们会停止进一步的下载，直到脚本文件被下载、分析和执行。
这会影响整个页面时间，尤其是在页面加载过程中发生多次。
为了最小化阻塞效果，可以将脚本元素放在页面，就在结束标记之前。
这样就没有其他资源可供脚本阻止。其余的页面组件将被下载，并且已经吸引用户。
最糟糕的反模式是在文档头使用单独的文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html>
<head>
My App

<script src="jquery.js">
<script src="jquery.quickselect.js">
<script src="jquery.lightbox.js">
<script src="myapp.js">
</head>
<body>
...
</body>
</html>

更好的选择是合并所有文件：

1
2
3
4
5
6
7
8
9
10

<!doctype html>
<html>
<head>
My App
<script src="all_20100426.js">
</head>
<body>
...
</body>
</html>

最好的选择是将组合脚本放在页面的最后：

1
2
3
4
5
6
7
8
9

<!doctype html>
<html>
<head>
My App
</head>
<body>
...
<script src="all_20100426.js">
</body>