HTML中的<style>标签被低估了
中。通常，最好将你的样式放在外部样式表中，并使用元素应用它们。 -- MDN
<style>元素必须包含在文档的
然而，在某些情况下，使用<style>标签可以带来性能上的提升，并且已经有尝试利用这一优势。
<head>
<style>
* {background: green;}
</style>
</head>
为什么在<style>标签中包含CSS而不是链接样式表可能会改善性能？
在网上搜索<style>标签或内联CSS与性能相关的信息，你会得到一些混合的结果。你只需要知道的是，包含在HTML文档中的<style>标签的内容可能比拉取外部文件更快地加载。
所有CSS都在<head>元素中的<style>标签中 = 需要加载的额外渲染阻塞资源较少，可能创建了一个优化。
例如，这个网站使用静态网站生成，在构建时从潜在的许多外部文件中创建一个包含所有所需CSS的<style>标签。这在页面的响应瀑布图中可见，页面是head。或者，你可以使用htmlq查询head博客页面的head元素：
curl --silent https://morganwebdev.com/blog/head/ | htmlq 'head'
你将看到CSS包含在<head>中的<style>标签内，而不是通过外部样式表链接。在你的浏览器开发工具的网络标签页中也可以看到这一点。
这项技术有着多样尝试的历史。例如，Google的AMP框架要求所有样式都在<head>中定义或内联，试图利用避免链接外部资源的性能提升。他们还显著地施加了CSS内容限制，后来又放宽了。超出CSS限制将使验证器失败… 一种比HTML更不宽容的方法。
33