CSS

Question

我对应该包含哪些JavaScript感到困惑？

例如：

应该在哪里包含jQuery库？在<head>或关闭</body>元素之前？
如果JavaScript在<body>的底部定义，是否可以在正文中内联使用？
如果它阻止了并行下载，那么为什么它从未说过将CSS包含在底部呢？

Answer 1

CSS

CSS加载在<head>中以防止Flash无格式内容（FOUC），这种情况下您的页面会在瞬间显示没有样式。将它们加载到<head>是一个小小的牺牲，以确保在呈现内容时您的页面看起来很完美。

JS

一般案例：

JS在底部加载了几个（但不限于以下）原因：

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

例外：

但规则有一些例外：

＆＃34;飞行前图书馆＆＃34;像Modernizr

Modernizr在<html>标记上应用类来表示功能的可用性，这些功能可用于JS和CSS目的。延迟这种情况可能会导致由于添加类而导致样式突然转移，以及因为检查没有早点完成而导致JS损坏。
CSS解析器，如LESS / SASS和影响样式的脚本

远程LESS / SASS样式通过AJAX加载，因此无论样式是否准备好，页面都会呈现。将它们装入头部将使它们尽可能早地加载样式以避免FOUC。
＆＃34; Bootloader libraries＆＃34;像RequireJS需要尽早加载以并行下载其他脚本。
Web应用程序需要JS作为平台。你最好早点加载这些库。此外，在webapp中，应用程序运行之前的页面内容很少。

Edge Cases：

这里有两个值得提及的脚本属性，它们是defer和async。

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

这里有MDN documentation解释更多关于它们的内容和an answer，它们几乎都讲述了它们的历史，支持和当前状态。

Answer 2

＆lt; script＆gt;的位置元件

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

<!doctype html>
<html>
<head>
    <title>My App</title>
    <!-- ANTIPATTERN -->
    <script src="jquery.js"></script>
    <script src="jquery.quickselect.js"></script>
    <script src="jquery.lightbox.js"></script>
    <script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>

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

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

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

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

应包含哪些JavaScript以及包含在内的内容？

2 个答案:

CSS

JS

一般案例：

例外：

Edge Cases：

＆lt; script＆gt;的位置元件