Question

（如果这是一个非常基本的问题，我道歉。我是一个HTML菜鸟。）

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

例如，假设一个（可能是神话般的）完全符合HTML5标准的浏览器＆＃34;，在这种情况下，以下两个片段会产生不同的结果＆＃34; （即，不同的外观，或明显不同的表现，或不同的行为等）？

<!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>元素的排序{1}}元素。）

Answer 1

表示性能，CSS首先是JS ......（但是JS会在标记结束时产生最佳性能，如其他一些答案中所述）

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

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

Answer 2

就性能而言......包括头文件中的CSS文件和页面底部的js文件......

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

Answer 3

不，没有区别。

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

Answer 4

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

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

Answer 5

要提高html网页加载的效果，建议您在正文末尾使用Javascript tag，在css使用head规则。当在引用它的文件之前应该存在的文件之一中引用其他script或css时，需要维护优先级。

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

应该注意脚本是被解释的，所以排序很重要。

Answer 6

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

Answer 7

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

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

对于IE来使用那个，它必须是头部的第一个项目（AFAIK）......

订购<link rel =“stylesheet”... =“”/>和<script ... =“”>标签是否显着？</script>

7 个答案: