订购< link rel =" stylesheet" ...>和< script ...>标签有意义? [英] Is ordering of <link rel="stylesheet" ...> and <script ...> tags significant?

查看:125
本文介绍了订购< 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 ...> < 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的制作网页更快的最佳实践文档

这篇关于订购&lt; link rel =&quot; stylesheet&quot; ...&GT;和&lt; script ...&gt;标签有意义?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆