在页脚上找到一些CSS代码时会发生什么
据我所知,CSS用于决定网页上的布局和其他样式.如果CSS位于页面底部,则所有内容(html元素,文本,图像等)都将使用浏览器自己的样式显示,当浏览器找到我们的CSS时,它会再次为我们重新设计页面.它可能被称为重新粉刷!
因此,我明白重新绘制页面和用户看到它会非常难看(FOUT - 无格式文本的Flash - 作为专家命名).但是,我仍然想了解:
重画可以花多少时间？大约值!我理解这可能取决于页面上的内容.还会发生什么或可能发生什么？
我现在主要担心的是是关于使用font-awesome CSS文件(外部托管在他们自己的cdn上下载css和字体文件).我想知道如果我将它放在页面底部或延迟加载会在设备上发生什么？目前它被放置在<head>部分为link rel ='stylesheet'href =' http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'type ='text/css'media ='screen'
使用Del,使其不应该成为问题的主要部分.问题的主要部分是关于底部的一些CSS然后将通过测量给出或支持的测量重新绘制,阻塞等会发生什么.
在上述情况下,或者只有部分文档会受到底层CSS的影响,那么会发生什么？浏览器重绘一切,还有什么？它需要多长时间.假设,font-awesome用于放置10个图标<i>.
当CSS处于底部时,我无法确定实际发生了什么.所以,如果您有任何显示流量的视频或图像,请在此处提及.
将所有内容都基于设备的性能,以及当然用户体验.谢谢.
更新:我为自己和每个人提供了更多的东西.这是一个谷歌建议用于css的函数(delayLoadCss),用于下载内容.虽然,我不会那么极端,但是对于Font-Awesome类型的CSS呢？
根据我的经验,加载css几乎是即时的,无论它出现在页面上的哪个位置 - 除了在一个实例中:什么会导致浏览器应用你的css的延迟是将你的css放在需要时间来完成的脚本元素之后.
这就是为什么用脚本来结束你的身体部分被认为是最好的做法,这样你的页面就会在浏览器提交脚本之前进行渲染和设置样式.
所以如果你的HTML看起来像这样:
<head>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script>
[long loading js]
</script>
</head>
<body>
... content
<script>
[long loading js]
</script>
</body>
然后你的css仍然会立即应用.
但是,如果你这样构造它:
<head>
<script>
[long loading js]
</script>
<style>
[css here]
</style>
</head>
<body>
... content
<script>
[long loading js]
</script>
</body>
甚至
<head>
<script>
[long loading js]
</script>
</head>
<body>
... content
<script>
[long loading js]
</script>
<style>
[css here]
</style>
</body>
然后,在js完成之后,您的css将不会应用于文档.
第一个是最佳实践,我建议将样式标签完全保留在文档中,但肯定不在文档正文中.放置在脚本标签上方的外部样式表是可行的方法......对于字体awesome的外部托管css也是如此.除非您的链接出现在占据浏览器注意力的脚本元素之后,否则浏览器不应挂起呈现.
*编辑*
然而,这篇文章与我刚才所说的完全相反.
CSS 有两个级联。
小级联：这是对单个样式表的解析
大级联：这是浏览器按以下顺序执行三个“小级联”的地方：
- 用户代理（Web 浏览器的原生样式表）
- 作者（您编写的样式表）
- 用户（最终用户可以编写的样式表）。
你的问题是如果你把样式放在除了头部之外的任何地方会发生什么。来！我们讨论一下：
- 浏览器在后台有自己的原生样式表
- 浏览器首先加载您的 HTML 文档
- 然后浏览器读取
<head> - 浏览器加载资源
<head> - 浏览器解析文档的其余部分，即
<body>. 位于此处的资产和样式规则将最后处理。 <style>文档中的最后一个块或最后一个样式表的样式优先于其他所有内容。
简而言之，浏览器按照样式出现的顺序应用样式。页脚的样式表会使事情变得更糟，而不是更好。我无法提供更糟的量化衡量标准，因为我没有您的样式表或网站。
所有浏览器都有 FOUC（或 FOUT）。它的持续时间取决于浏览器的速度和样式表的质量。在重置后立即应用文本样式的缩小样式表，在其他样式之前，通常具有最少的 FOUC。
页脚中的样式不会被阻止处理，它们也不会阻止 中的样式<head>。页脚中的样式只是最后处理。
| 归档时间： |
|
| 查看次数： |
1163 次 |
| 最近记录： |