【发布时间】：2014-11-11 11:01:48
【问题描述】：
几年前，我受雇为符合 W3C/AA 标准的客户端应用程序开发 Web 前端。有人告诉我 CSS、JS 和其他非视觉/非展示内容应该始终保留在 head 标记中。
示例
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="site.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="site.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Code here...
});
</script>
<head>
<body>
<div class="container">
...
</div>
</body>
</html>
这种方法一直对我有用，但在我目前的角色中，出于性能/执行原因，我被要求将 CSS 和 JS 引用全部移至文档底部
示例
<!DOCTYPE html>
<html>
<head>
...
<head>
<body>
<div class="container">
...
</div>
<link type="text/css" rel="stylesheet" href="site.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="site.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Code here...
});
</script>
</body>
</html>
有人告诉我，这样做并没有违反任何合规性或可接受性标准，并且在某些情况下可以让网站加载速度更快，但是这导致的问题比解决的问题要多。
因此，我想知道我是否应该坚持将这些资源保留在 head 标签中的决定，或者另一方面，是否有任何令人信服的论据支持将资源标签放在底部，或者分散在文档中?
【问题讨论】：
-
第二个例子造成了什么样的问题？我通常把
scripts放在底部，就像第二个例子一样。还有header上的stylesheets。不过，我不知道最佳做法是什么。 -
@azhpo，将脚本文件移动到底部会导致页面上的所有功能中断。我对 jQuery 的 .ready() 函数的理解是允许脚本仅在 DOM 完全加载后执行，从而允许脚本保留在头脑中。至于 CSS 样式，当 CSS 应用于文档末尾时，SVG 元素会出现可怕的故障。
-
“任何合规性或可接受性标准”：这是否包括或排除正式/句法 HTML5 规则（即，文档是否无效是否重要）？
-
@unor 包括正式/语法 HTML5 规则...我猜 :-/
标签： javascript html css w3c w3c-validation