不要外部样式表获得HTML之前加载?

问题描述 投票:16回答:4

如果我已被列入我的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下载)?

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

html css rendering order-of-execution
4个回答
10
投票

如果您在头部分的CSS,你可以确信的是,标签将不会显示。

该HTML首先下载。浏览器开始读取从顶部的HTML,并开始取head部分中引用的所有CSS和JavaScript文件。该页面将不会被画(如图所示),直到HEAD所有的CSS和JavaScript文件被下载和评估。


6
投票

样式表并不能防止文件被下载,但直到所有的链接的样式表已经下载并加载到DOM浏览器不会呈现文档。

这是使浏览器不需要呈现页面两次(在这个过程中浪费时间),并让无样式页面将不会在用户面前闪光之前的样式表已经下载和解析。


1
投票

我相信一切都得到的确切顺序,你把它放在你所创建的HTML(或其他格式)文件加载。

因此,在样式表调用的情况下,它会当它是相对于直接读取调用到您(在通常情况下)写的

一个很好的“概念验证”将创建一个JavaScript函数一定的时间量过去之后,将加载样式表。在这个功能,你可以与阿贾克斯的样式负荷。


0
投票

我认为最简单的回答你的问题是:“是的......样式表会首先加载”这就是为什么你的头链接到他们。作为ghostcake以上建议,你可以做时髦的东西来调整其浏览器的响应,并呈现在HTML文件中的任何指令的顺序,但浏览器的默认功能是本质上试图解决每一行标记的顺序是被呈现。因此,这也是为什么它最好把跟踪脚本等,在页面的底部...页脚下方,但身体标记上方。 (这样做让你的页面的功能处理,否则不可见的用户之前渲染。)如果你觉得像你这样的委员会,以画点什么艺术家或起草人浏览器,你必须告诉艺术家如何/画什么,他们拿起笔之前到纸上。同样,告诉浏览器在哪里取你的指令重新。通过在头部链接的造型使得它能够“知道”什么,怎么“画”就开始“画”了。

© www.soinside.com 2019 - 2024. All rights reserved.