是否在 HTML 之前加载外部样式表？
Posted
技术标签:
【中文标题】是否在 HTML 之前加载外部样式表？【英文标题】：Do external stylesheets get loaded before the HTML? 【发布时间】：2011-09-23 21:58:47 【问题描述】：如果我的 html 页面的 <head></head> 部分中包含外部样式表，它们会在 HTML 之前加载并在呈现时立即应用吗？让我介绍一下我的具体用例。
外部styles.css文件：
form label
display: none;
包含表单的页面：
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</form>
我可以确定标签在页面加载时不可见（不会因 CSS 下载而闪烁）吗？
否则，我可以内联添加样式属性，但这可能是维护的噩梦。
【问题讨论】：
为什么要隐藏label？
好问题！我认为答案是您通常可以确信标签是不可见的，但没有 100% 的保证 - AFAIK，样式表总是与页面平行加载和解析，它们不会像 JS 脚本那样阻止事情。相关：Load and execution sequence of a web page?
我想这会因浏览器而异......但我不确定。
【参考方案1】：
我相信对您的问题最简单的答案是：“是的...样式表首先加载。”这就是为什么你在头脑中链接到它们。正如上面 ghostcake 建议的那样，您可以做一些时髦的事情来调整浏览器响应并呈现 html 文件中的任何指令的顺序，但浏览器的默认功能基本上是尝试按顺序处理每一行标记被呈现。因此，这也是为什么最好将跟踪脚本等放在页面底部...在页脚下方但在正文标记上方的原因。 （这样做让我们在处理用户不可见的功能之前渲染您的页面。）如果您将浏览器视为您委托绘制某些东西的艺术家或绘图员，您必须在他们放笔之前告诉艺术家如何/绘制什么到纸上。同样，告诉浏览器从哪里获取你的指令。通过头部中的链接进行样式设置允许它在开始“绘制”之前“知道”什么以及如何“绘制”。
【讨论】：
【参考方案2】：样式表不会阻止文档被下载，但在所有链接的样式表都已下载并加载到 DOM 之前，浏览器不会呈现文档。
这样浏览器就不需要渲染页面两次（在这个过程中浪费时间），并且在样式表被下载和解析之前，没有样式的页面不会在用户面前闪现。
【讨论】：
【参考方案3】：如果您在 head 部分包含 CSS，您可以确信标签不会显示。
首先下载 HTML。浏览器从顶部开始读取 html，并开始获取 HEAD 部分中引用的所有 CSS 和 javascript 文件。在下载和评估 HEAD 中的所有 CSS 和 JavaScript 文件之前，不会绘制（显示）页面。
【讨论】：
如果我在<style> 和</style> 之间将我的CSS 代码写入<head>（没有附加CSS 文件），那么我可以确信该页面不会被绘制（显示）直到所有CSS 代码是否已应用？
@user4920811 是
请注意，这仅适用于嵌入式 CSS，不适用于加载 CSS 的链接标签。几秒钟后，浏览器将在没有 CSS 的情况下呈现，并在 CSS 最终到达时重新呈现。【参考方案4】：
我相信所有内容都会按照您在创建的 html（或任何格式）文档中的确切顺序加载。
因此，在样式表调用的情况下，当直接读取与您编写它的位置相关的（通常在 中）时，它将被调用
一个很好的“概念证明”是创建一个 javascript 函数，该函数将在经过一定时间后加载样式表。在此函数中，您可以使用 ajax 加载样式表。
【讨论】：
或者不是在按钮单击/其他事件的某个时间之后。或者甚至只是在页面底部的 JavaScript 中？ 没错！低调的模块化网站设计，万岁！以上是关于是否在 HTML 之前加载外部样式表？的主要内容，如果未能解决你的问题，请参考以下文章