Question

如果我的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下载没有闪烁）吗？

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

Answer 1

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

首先下载HTML。浏览器开始从顶部读取html，并开始获取HEAD部分中引用的所有CSS和JavaScript文件。在下载并评估HEAD中的所有CSS和JavaScript文件之前，不会绘制（显示）页面。

Answer 2

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

这样浏览器不需要渲染页面两次（在此过程中浪费时间），因此在下载和解析样式表之前，未设置样式的页面不会在用户面前闪烁。

Answer 3

我相信所有内容都会按照您创建的html（或任何格式）文档的确切顺序加载。

因此，在样式表调用的情况下，当它与您编写它的位置（通常在）中直接读取时将被调用

一个好的'概念证明'就是创建一个javascript函数，在经过一定时间后加载样式表。在这个函数中，你可以使用ajax加载样式表。

Answer 4

我相信您问题的最简单答案是：“是 ......首先加载样式表。”这就是你在头脑中链接它们的原因。正如上面提到的ghostcake，你可以做一些时髦的东西来调整浏览器响应的顺序并在你的html文件中呈现任何指令，但是浏览器的默认功能是基本上尝试按顺序解决每一行标记。被表达。因此，这也是为什么最好将跟踪脚本等放在页面底部...页脚下方，但在body标签上方。（这样做是让你的页面呈现，然后再处理用户看不到的功能。）如果你认为浏览器像艺术家或绘图员那样你想要画一些东西，你必须告诉艺术家如何在绘画之前绘制什么纸。同样，告诉浏览器重新获取指令的位置。通过头部中的链接进行样式设置使其能够“知道”什么以及如何在开始“绘制”之前“绘制”。

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

4 个答案: