订购< link rel =" stylesheet" ...>和< script ...>标签有意义?

问题描述:

(如果这是一个非常基本的问题,我道歉。我有点像HTML菜鸟。)

(I apologize if this is an extremely basic question. I'm a bit of an HTML noob.)

在HTML5中,是< head> 元素,元素的格式为< link rel =stylesheettype =text / css...> 以及形式为< script ...>< / script> 的元素,无论是在语义上还是在性能方面(或在其他一些方式)?

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的浏览器,是否存在以下两个片段会产生不同的情况结果(即不同的外观,或明显不同的表现,或不同的行为等)?

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.)?

<!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 ...> $ c $的排序c>和< script> ...< / script> < head> ...< / head> 元素。)

(<!-- ... --> 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.)

性能,CSS首先是JS ...(但JS产生最佳性能在其他一些答案中提到的标记结尾处)

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)


样式表应始终在文档的头部指定以获得更好的效果在可能的情况下,重要的是,必须包含在头部的任何外部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) follow the stylesheets, to prevent delays in download time.

引自优化样式和脚本的顺序(来自 Google的制作网页更快的最佳实践文档