关于性能：在页脚上找到一些CSS代码时会发生什么

What Exactly Happens When Some CSS Code Found on the Footer

我知道CSS用于决定网页上的布局和其他样式。如果CSS在页面的底部，那么所有东西(HTML元素、文本、图像等)都将通过使用浏览器自己的样式来显示，当浏览器找到我们的CSS时，它会再次为我们重新设计页面。这可能叫做重新粉刷！

所以，我理解重新粉刷页面会很难看，而且用户看到它(非样式文本的快速闪现，专家命名)。但我还是想了解：

重新喷漆需要多长时间？大约值！我知道这取决于页面上的内容。还可能发生什么？

my main concerned right nowis about using FONT Awesome CSS file(external hosted on their own cdn which download css and FONT files).我想知道如果我把它放在页面的底部或者延迟它的加载，设备之间会发生什么？目前放在段为

link rel='stylesheet'href='http://netdna.bootstrapcdn.com/font-awome/4.0.3/css/font-awome.css'type='text/css'media='screen'

使用del，这样它就不会看起来是问题的主要部分。问题的主要部分是关于底部的一些CSS，那么在给定测量值或由测量值支持的情况下，重新喷漆、阻塞等会发生什么。

在上面的情况下，或者在只有部分文档会受到底部CSS影响的情况下，会发生什么？浏览器重新绘制所有内容，还有什么？需要多少时间。假设，放置在中的10个图标使用了字体awesome。

我不知道当CSS位于底部时实际会发生什么。所以，如果你有任何视频或图像显示流程，请在这里提及。

所有这些都基于设备的性能，以及非课程用户体验。谢谢您。

更新：我为自己和每个人都准备了更多的东西。下面是一个函数(delayloadcss)google为下面的折叠内容推荐的css。虽然，我不会走极端，但如何做的字体可怕的类型的CSS？ enter image description here

根据我的经验，无论CSS出现在页面上的什么地方，它的加载几乎都是即时的——除了一个例子：应用CSS会导致浏览器延迟的是将CSS放在需要时间才能完成的脚本元素之后。

这就是为什么我们认为最好的做法是用脚本结束您的body部分，这样在浏览器提交处理脚本之前，您的页面将被呈现并设置样式。

因此，如果您的HTML如下所示：

1
2
3
4
5
6
7
8
9
10
11
12

<head>
<link rel="stylesheet" type="text/css" href="/css/styles.css">

[long loading js]

</head>
<body>
... content

[long loading js]

</body>

那么你的CSS仍然会立即应用。

但是，如果您这样构造它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<head>

[long loading js]

<style>
[css here]
</style>
</head>
<body>
... content

[long loading js]

</body>

甚至

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<head>

[long loading js]

</head>
<body>
... content

[long loading js]

<style>
[css here]
</style>
</body>

然后，在JS完成之前，您的CSS将不会应用于该文档。

第一个是最佳实践，我建议将样式标签完全保留在您的文档中，但一定要保留在您的文档正文中。放置在脚本标记上方的外部样式表是一种方法…这也适用于字体Awesome的外部托管CSS。除非链接出现在引起浏览器注意的脚本元素之后，否则浏览器不应继续渲染。

*编辑*

然而，这篇文章直接反驳了我刚才所说的。