<link rel="stylesheet" ...> 和 <script ...> 标签的顺序是否重要？答案

【问题标题】：Is ordering of <link rel="stylesheet" ...> and <script ...> tags significant?<link rel="stylesheet" ...> 和 <script ...> 标签的顺序是否重要？
【发布时间】：2013-08-29 05:29:30
【问题描述】：

（如果这是一个非常基本的问题，我深表歉意。我有点 HTML 菜鸟。）

在 HTML5 中，<head> 元素内的相对顺序是 <link rel="stylesheet" type="text/css" ...> 形式的元素和 <script ...></script> 形式的元素之间的相对顺序，无论是语义上还是性能上（或以其他方式） ?

例如，假设一个（可能是虚构的）“完全兼容 HTML5 的浏览器”，是否存在以下两个 sn-ps 会产生“不同结果”的情况（即不同的外观，或明显不同的性能，或不同的行为等）？

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="foo.css"/>
    <script src="foo.js"></script>
    <!-- ... -->
  </head>
  <!-- ... -->
</html>

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <script src="foo.js"></script>
    <link rel="stylesheet" type="text/css" href="foo.css"/>
    <!-- ... -->
  </head>
  <!-- ... -->
</html>

（ 表示对这两种情况都正确且通用的代码。IOW，这两种情况之间的唯一区别是<link...> 和<script>...</script> 元素在<head>...</head> 元素中的顺序。）

【问题讨论】：

我猜没有...一般script标签顺序很重要。
顺序在您的示例中并不重要。实际上，如果一个脚本依赖于另一个脚本，您必须订购这些脚本。使用 CSS，您必须最后包含媒体查询样式表和特定于浏览器。
正如大家所说，写js at the end of body也是必要的。因为必须在js中引用或使用DOM对象之前创建它..

标签： javascript css html

【解决方案1】：

就性能而言，首先是 CSS，然后是 JS...（但 JS 在标记末尾产生最佳性能，如其他一些答案中所述）

样式表应始终在文档头部指定以获得更好的性能，重要的是，在可能的情况下，必须包含在头部的任何外部 JS 文件（例如写入文档的那些）样式表，以防止下载时间延迟。

引用Optimize the order of styles and scripts（来自Google's "Make the Web Faster" Best Practices docs）

【讨论】：

【解决方案2】：

在性能方面...在页眉中包含 CSS 文件，在页面底部包含 js 文件...

就顺序而言，css文件和js文件的顺序很重要...在css文件中，如果多个文件中存在相同的规则，则后面的一次将优先...在js文件中，应首先包含依赖的文件

【讨论】：

【解决方案3】：

不，没有区别。

您唯一应该考虑的是将<script> 标签放在<body> 的底部。有关此问题的更多信息，请阅读this article by Yahoo。

【讨论】：

【解决方案4】：

最好在标题中包含样式表，在底部包含脚本，因为，用户必须等待 JavaScript 完成加载，标签会阻止并行下载。

请查看以下链接\ Is the recommendation to include CSS before JavaScript invalid?

【讨论】：

【解决方案5】：

为提高 html 页面加载的性能，建议在正文末尾使用 Javascript tag，在head 中使用css 规则。当其他script 或css 在其中一个文件中被引用时，需要保持优先级，该文件应该在引用它的文件之前。

我们可以考虑一个简单的例子。 jquery.js 文件始终位于其他 js 文件的顶部，因为其他文件依赖于该 jquery 文件。

需要注意的是脚本是被解释的，所以顺序很重要。

【讨论】：

【解决方案6】：

在一般情况下，应假定顺序是显着的。因为它可以。例如，JavaScript 代码可能会尝试访问 link 元素，然后 link 元素是否出现在 script 元素之前很重要（在这种情况下，当脚本执行时它存在于 DOM 中）。

【讨论】：

【解决方案7】：

我能想到的只有一个是 IE 的元标记...

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

要让 IE 使用那个，它必须是头中的第一项 (AFAIK)...

【讨论】：