外部样式表是否在HTML之前加载? [英] Do external stylesheets get loaded before the HTML?

查看:186
本文介绍了外部样式表是否在HTML之前加载?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果我的HTML页面的< head>< / head> 部分中包含外部样式表,它们将在HTML之前加载并立即应用渲染?

外部styles.css文件:

 表单标签{
display:none;
}

包含表单的页面:

 < head> 
< link rel =stylesheethref =styles.csstype =text / css/>
< / head>
< form action =process.phpmethod =post>
< label for =name> Name< / label>
< input type =textid =namename =name/>
< / form>

我可以相信,在加载页面时,标签将不可见(由于CSS下载而不闪烁) ?



否则,我可以添加style属性inline,但这可能是一个维护噩梦。

解决方案

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



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


If I have external stylesheets being included in the <head></head> section of my HTML page, will they be loaded before the HTML and immediately applied upon rendering? Let me present my specific use case.

External styles.css file:

form label {
    display: none;
}

Page containing form:

<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>

Can I be confident that the labels will be invisible upon page load (no flickering due to CSS downloading)?

Otherwise, I can add the style attribute inline, but that can be a maintenance nightmare.

解决方案

If you include the CSS in the head section, you can be confident that the label will not show.

The HTML is downloaded first. The browser starts reading the html from the top, and starts fetching all CSS and JavaScript files referenced in the HEAD section. The page will not be painted (shown) until all the CSS and JavaScript files in the HEAD have been downloaded and evaluated.

这篇关于外部样式表是否在HTML之前加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆