javascript <link rel="stylesheet" ...> 和 <script ...> 标签的顺序是否重要？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18448973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is ordering of <link rel="stylesheet" ...> and <script ...> tags significant?
提问by kjo
(I apologize if this is an extremely basic question. I'm a bit of an HTML noob.)
（如果这是一个非常基本的问题，我深表歉意。我有点 HTML 菜鸟。）
In HTML5, is the relative ordering within the <head>element, of elements having the form <link rel="stylesheet" type="text/css" ...>and elements having the form <script ...></script>at all significant, either semantically or performance-wise (or in some other way)?
在 HTML5 中，<head>元素内的相对顺序、具有形式的元素和具有形式的<link rel="stylesheet" type="text/css" ...>元素<script ...></script>在语义或性能方面（或以其他方式）是否重要？
For example, assuming a (possibly mythical) "fully HTML5-compliant browser", are there situations in which the following two snippets would produce "different results" (i.e., different appearance, or noticeable different performance, or different behavior, etc.)?
例如，假设一个（可能是虚构的）“完全符合 HTML5 的浏览器”，是否存在以下两种情况会产生“不同的结果”（即不同的外观，或明显不同的性能，或不同的行为等）？ ?
<!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>
(<!-- ... -->denotes code that is both correct and common to both cases. IOW, the only difference between the two cases is the ordering of the <link...>and <script>...</script>elements within the <head>...</head>element.)
（<!-- ... -->表示对两种情况都正确且通用的代码。IOW，两种情况之间的唯一区别是元素内<link...>和<script>...</script>元素的顺序<head>...</head>。）
采纳答案by MikeM
for performance, CSS first then JS...(but JS yields best performance at the end of the markup as noted in some of the other answers)
对于性能，首先是 CSS，然后是 JS ......（但 JS 在标记结束时产生最佳性能，如其他一些答案中所述）
stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) followthe stylesheets, to prevent delays in download time.
应始终在文档的头部指定样式表以获得更好的性能，重要的是，在可能的情况下，必须包含在头部的任何外部 JS 文件（例如写入文档的文件）遵循样式表，以防止延迟在下载时间。
quote from Optimize the order of styles and scripts(from Google's "Make the Web Faster" Best Practicesdocs)
回答by Arun P Johny
In terms for performance... include CSS files in the header and js files at the bottom of the page...
在性能方面......在页面底部包含头文件和js文件中的CSS文件......
In terms of order the order of css files and js files matter... in css file if the same rule is present in multiple files the later once will get precedence... in js file the depended files should be included first
就顺序而言，css 文件和 js 文件的顺序很重要……在 css 文件中，如果多个文件中存在相同的规则，则后者优先……在 js 文件中，应首先包含依赖的文件
回答by Prasanna Aarthi
It is always better you include style sheet in the header and the scripts at the bottom because, users have to wait till the JavaScript finishes loading, tags block parallel downloads.
最好在标题中包含样式表，在底部包含脚本，因为用户必须等到 JavaScript 完成加载，标签会阻止并行下载。
please look the following links\ Is the recommendation to include CSS before JavaScript invalid?
请查看以下链接\ 是否建议在 JavaScript 之前包含 CSS 无效？
回答by tobi.at
No, there is no difference.
不，没有区别。
The only thing you should consider is putting your <script>tags at the bottom of the <body>. For more information regarding this issue read this article by Yahoo.
您唯一应该考虑的是将<script>标签放在<body>. 有关此问题的更多信息，请阅读Yahoo 的这篇文章。
回答by Ashwani
To increase the performance of html page load, it is recommended that you use Javascript tagin the end of the body and cssrule in the head. Precedence need to be maintain when other scriptor cssis referenced in one of the file which should be there before the file which is referencing it.
为了提高html页面加载的性能，建议tag在body末尾使用Javascript ，在.rule中使用cssrule head。当其他script或css在引用它的文件之前应该存在的文件之一中引用时，需要保持优先级。
We can consider a simple example that. jquery.jsfile always be at top of the othes jsfiles because, other files rely on that jqueryfile.
我们可以考虑一个简单的例子。jquery.js文件始终位于js其他文件的顶部，因为其他文件依赖于该jquery文件。
It should be noted that scripts are interpreted, so there ordering is important.
应该注意的是，脚本是被解释的，所以排序很重要。
回答by Jukka K. Korpela
In the general case, the order should be assumed to be significant. Because it can be. JavaScript code may, for example, try to access a linkelement, and then it matters whether the linkelement appears before the scriptelement (in which case it exists in the DOM when the script is executed).
在一般情况下，应该假设顺序是重要的。因为它可以。例如，JavaScript 代码可能会尝试访问一个link元素，然后该link元素是否出现在该script元素之前很重要（在这种情况下，执行脚本时它存在于 DOM 中）。
回答by Duncan
Only one I can think of is the meta tag for IE...
我能想到的只有一个是 IE 的元标记...
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
For IE to make use of that one, it has to be the first item in the head (AFAIK)...
为了让 IE 使用那个，它必须是头部的第一项（AFAIK）......
