logo标签列表

HTML和CSS - 将<link>标签放在<head>外部

htmlcssperformancehyperlinkhead
36

将 <link> 标签放在头部之外，例如在页脚处，这样做可以吗？

这样做的好处和坏处是什么？

我问这个问题，因为我有一个 CSS 文件，它只提供一些 CSS3 动画效果而没有样式，所以出于性能原因，我想把它放到 HTML 的末尾...

谢谢

7个回答
35

首先，这需要更长的时间，其次，看起来真的很丑陋。

这与包含的脚本不同，因为脚本将阻止加载直到它们完成，因此您应该尽可能晚地在进程中加载它们。

请您能否检查一下我更新的问题，并且能否说明为什么这需要“更长”的时间？ - itsme
如果浏览器必须等到它到达文档末尾才能应用任何样式信息，那么它很可能需要渲染页面两次 - 因此速度会变慢。在您具体的情况下，现在您已经更清楚地解释了，可能没有性能惩罚，但是如果CSS相对较小，则可能也没有性能提升。 - user1864610
24
根据W3规范，<link>标签只应放在<head>部分中：

参考文献

对于HTML 4.01： http://www.w3.org/TR/html401/struct/links.html#edef-LINK

对于HTML5： http://www.w3.org/TR/html5/document-metadata.html#the-link-element

验证问题：更新于2017年10月27日

回到2013年，如果您将link标签放在HTML文档的body中，它将无法使用基于HTML 4.01的规则进行validate.w3.org验证。

您可以在 https://validator.nu 上尝试 HTML 4.01 和 HTML 5.0 的验证。

初次阅读 HTML 5.0 规范文件，似乎暗示着 link 应该只出现在文档的 head 元素中。然而，如果您使用 HTML 5.0 验证器进行验证，则即使在流内容中有一个 link，文档也会显示正常。

这种差异的最好解释可能是如下所述。

如果您阅读 link 条目的 MDN 文档 (MDN Link entry)，则会发现如果 link 元素具有 itemprop 属性，则 link 可以出现在流和短语内容中，因此出现在 body 中。

这可能是 HTML 5.0 验证器即使没有出现 itemprop 属性也不会发出警告的原因。

itemprop是微数据规范的一部分，相对较新（阅读HTML微数据），值得一读。

目前，可以在body中添加一个link到样式表中，但不清楚其优点是什么。

1
好的，明白了，那么这会抛出一个标准错误验证错误，对吗？ - itsme
1
我没有看到任何关于在<head>之外使用<link>的验证错误。 - Matt
HTML5规范并没有提到链接元素只能放在head元素中，这是一个谎言。正如Matt所指出的，HTML5的w3验证器也没有任何反对意见。 - Jonas Äppelgran
3

WHATWG HTML标准允许在很多特定情况下在正文中使用<link>。

至于在</body>之前放置<link>的“合理性”，最近我已经在图库中使用它来预加载一些大图片：

<link rel="preload" href="images/big/01.jpg" as="image">

因此，当用户点击缩略图时，通常无需等待服务器响应，因为图像已经加载到浏览器缓存中。

3
这是一篇关于IT技术的讨论，但需要注意的是现在（2017年）Google Pagespeed Insights实际上建议把大型CSS文件的加载推迟到页面下部以确保它们不会阻塞HTML的加载。请参考这里了解更多信息。
5
这并不是一个好的建议——它可能无法阻止HTML的加载，但会防止页面在CSS加载之前准确地呈现。正如@user1864610指出的那样，这将导致页面在CSS加载时被重新渲染，从而增加用户感知的页面加载时间。 - FKEinternet
1
建议是将“用于呈现屏幕上方内容所必需的CSS”内联。 - liammclennan
2

是的，在HTML5规范中将链接元素放在body元素内是可以的。它是好还是坏取决于你要链接什么。如果它对于网站的第一次浏览不是至关重要的话，那么我认为尽可能晚地加载它是一个好主意。

2
根据HTML5规范第4.2.4节，link元素属于元数据内容类别，可用于期望元数据内容的地方，即在head元素中（请参见https://www.w3.org/TR/html5/document-metadata.html#the-link-element）。根据规范，`body`元素包含流内容，而`link`不被视为流内容。基于浏览器行为，将`link`放置在`body`元素中可能是可以的，但这与规范允许有所不同。 - Marc Audet
嗨，乔纳斯，根据你的评论，我进行了一些研究，并更新了我的原始答案（来自2013年），以反映HTML 5.0正在出现的新思想，谢谢你的帮助！ - Marc Audet
马克：你可能是对的，但我没看到“期望元数据内容的地方”这个语句的定义。例如，如果你将link的规范与meta的规范进行比较，它们明确指出在某些情况下只能在head内使用meta。 - Jonas Äppelgran
1

在任何 <link> 标签之前，必须放置 <!DOCTYPE html>。从经验来看，这可能会导致某些页面出现故障。

你能进一步解释一下吗？为什么那是必要的？是什么让你觉得OP没有做到那一点？ - Nico Haase
0

在软件开发中，万物皆变。现在将CSS放在body中被认为是一种良好的实践，例如：

<head>
</head>
<body>
  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->
  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>

  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>

  <link rel="stylesheet" href="/site-footer.css">
  <footer>…</footer>
</body>

来源：https://jakearchibald.com/2016/link-in-body/

我正在尝试寻找更多此用法的示例。在使用HTTP/2时，这种方式对我很有意义，但我没有找到很多人谈论它。 - Link14
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接