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

Question

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

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

在HTML5中,<head>元素中的相对排序是具有形式的元素<link rel="stylesheet" type="text/css" ...>和具有<script ...></script>所有重要形式的元素,无论是在语义上还是在性能方面(或以其他方式)？

例如,假设(可能是神话般的)"完全符合HTML5的浏览器",是否存在以下两个片段会产生"不同结果"(即,不同的外观,或明显不同的性能或不同的行为等)的情况. ？

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

(表示两种情况都正确且通用的代码.IOW,两种情况之间的唯一区别是元素中元素<link...>和<script>...</script>元素的排序<head>...</head>.)

Answer 1

Mik*_*keM 7

为了性能,CSS首先是JS ...(但是JS会在标记结束时产生最佳性能,如其他一些答案中所述)

应始终在文档的头部指定样式表以获得更好的性能,在可能的情况下,必须包含在头部中的任何外部JS文件(例如写入文档的文件)都遵循样式表,以防止延迟,这一点很重要在下载时间.

引用优化样式和脚本的顺序(来自 Google的"让网络更快"的最佳实践文档)

归档时间：	12 年，2 月前
查看次数：	9746 次
最近记录：	12 年，2 月前