JavaScript/CSS 应该放在 HTML 页面的底部吗？答案

【问题标题】：Should JavaScript/CSS be put in the bottom of an HTML page?JavaScript/CSS 应该放在 HTML 页面的底部吗？
【发布时间】：2015-06-20 14:00:34
【问题描述】：

我正在使用 jQuery Mobile，现在，我的 <head> 标签底部有以下内容：

<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>help</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

由于用户可能有一个非常糟糕的网络访问，我希望用户能够更快地加载我的页面，即使 JavaScript 或 CSS 还没有准备好。

如果我：它会起作用：

把<head>放在<body>之后
将<script>放在<body>的末尾

【问题讨论】：

开发人员将<script> 标签放在<body> 的底部，因为它允许在获取脚本之前加载整个页面。如果它们在<head> 中，则用户需要等待脚本下载，然后才能下载页面的其余部分。我认为您不希望将 CSS 放在页面底部，因为用户可能会看到未设置样式的内容，然后在加载 CSS 时突然发生变化。将您的<head> 放在文档顶部。
不要把<head>放在<body>之后，那肯定是无效的。
但是，一旦用户加载了一次脚本和CSS文件，它们应该被浏览器缓存，不需要每次页面访问都下载。
嗨 @BenGuest ，就我而言，我什至不在乎 CSS 是否已加载，因为我的 html 非常简单且充满文字（这有点像指南）。主要问题是加载速度，jquery CSS 只是让它有点漂亮。那么，可以考虑任何使速度最大化的方法吗？你知道我怎么才能不让 CSS 阻止我的页面加载吗？
我想你可以决定哪些 CSS 文件是真正需要的，哪些不太重要，然后将不太重要的放在 <body> 的底部。

标签： javascript jquery html css jquery-mobile

【解决方案1】：

不，您不能将head 放在body 之后。
是的，你可以，这是推荐的方式，因为这样浏览器就会像你说的那样首先加载 html 组件，然后再应用你的脚本。但是你可以在你需要它之前放置它，而不是真的很快。 Read more here.

另一方面，css 应该链接到您的 head 标记内。

【讨论】：

感谢您的回答。就我而言，我什至不在乎 CSS 是否已加载，因为我的 html 非常简单且充满文字（这有点像指南）。主要问题是加载速度，jquery CSS 只是让它有点漂亮。所以，可以考虑任何方式来最大化速度。你知道我怎么才能不让 CSS 阻止我的页面加载吗？
如果您没有在 css 中加载任何图像或任何其他繁重的东西，那么它并不是特别消耗资源。我建议您应该检查您的 css 和脚本内容，或者将其发布在一个新问题中。然后我们可以看到可能是什么问题。

【解决方案2】：

你不能把<head>放在<body>之后。

将<script> 放在<body> 的末尾很好。但是，您的问题的最佳解决方案是将<script> 放在<head> 标记中并使用async 或defer 属性。说明可以找到here。

而且 CSS 应该总是转到 <head>。

【讨论】：