外部样式表是否在HTML之前加载？

如果我的HTML页面的<head></head>部分包含外部样式表，它们是否会在HTML之前加载并立即应用于渲染？让我来介绍一下我的具体用例。外部样式表是否在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下载）？

否则，我可以添加样式属性内联，但这可能是一个维护噩梦。

来源

2011-06-27 Stephen Watkins

为什么要隐藏'label'？ – You

好问题！我认为答案是，你可以*通常*确信标签是不可见的，但没有100％的保证 - AFAIK，样式表总是被加载并且与页面平行分析，它们不会阻止JS脚本呢。相关：[网页的加载和执行顺序？]（http://stackoverflow.com/questions/1795438/1795502#1795502） –

我想这会因浏览器而异......但我不确定。 –

如果您在头部包含CSS，您可以确信标签不会显示。

首先下载HTML。浏览器开始从顶部读取html，并开始提取HEAD部分中引用的所有CSS和JavaScript文件。直到HEAD中的所有CSS和JavaScript文件都被下载并评估为止，页面才会被绘制（显示）。

来源

2011-06-28 00:06:00 Emil

如果我把我的CSS代码写入''在''之间（没有附加CSS文件），那么我是否可以确信在所有CSS代码应用之前该页面不会被绘制（显示）？ – 2015-06-07 08:13:16

我相信所有东西都会按照您将其放置在您创建的html（或任何格式）文档中的顺序加载。

所以在样式表调用的情况下，它会当它是相对于直接读取到你写的（一般在）这将是

一个很好的“概念验证”叫创建一个javascript函数，可以在经过一段时间后加载样式表。在这个函数中你可以用ajax加载样式表。

来源

2011-06-27 23:59:46 zillaofthegods

或者在一定时间后点击按钮/其他事件。甚至只是在页面底部的JavaScript中？ –

是的！低，并看到模块化的网站设计，hoorah！ – zillaofthegods

样式表不会阻止文档被下载，但浏览器不会呈现文档，直到所有链接的样式表都被下载并加载到DOM中。

这使得浏览器不需要渲染页面两次（浪费时间在进程中），并且在样式表被下载和解析之前，无风格页面不会在用户面前闪烁。

来源

2011-06-28 00:06:43 user805804

我相信你的问题最简单的答案是：“是的 ...样式表首先被加载。”这就是为什么你与他们联系在一起的原因。正如上面提到的ghostcake，你可以做一些时髦的东西来调整浏览器响应的顺序并呈现html文件中的任何指令，但浏览器的默认功能本质上是尝试按照它的顺序来处理每一行标记被呈现。因此，这也是为什么最好将跟踪脚本等放在页面底部......在页脚下方，而在身体标签上方。（这样做就是让页面在处理用户不可见的功能之前进行渲染。）如果您认为浏览器像艺术家或绘图员那样委托绘制某些东西，那么您必须告诉艺术家在放置笔之前如何/如何绘制去纸。同样，告诉浏览器在哪里取回你的指令。通过头部链接的造型使其能够“知道”什么以及如何在之前“画”它开始“画”。

来源

2011-07-20 05:45:13 Sean

外部样式表是否在HTML之前加载？

回答

相关问题