【问题标题】：What Exactly Happens When Some CSS Code Found on the Footer当在页脚中发现一些 CSS 代码时究竟会发生什么
【发布时间】：2013-12-23 10:33:41
【问题描述】：

我了解 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 的影响，会发生什么？ 浏览器重绘所有内容，还有什么？可以花多少时间。假设在<i>中放置的10个图标上使用了font-awesome。

我不确定当 CSS 位于底部时实际发生了什么。因此，如果您有任何显示流程的视频或图像，请在此处提及。

一切都基于跨设备的性能，当然还有用户体验。谢谢。

更新：我为自己和每个人都得到了更多的东西。这是 Google 建议的用于 CSS 的函数 (delayLoadCss)，用于首屏内容。虽然，我不会走那么极端，但是为 Font-Awesome 类型的 CSS 做那件事呢？

【问题讨论】：

标签： css performance

【解决方案1】：

根据我的经验，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>

那么你的css直到js完成后才会应用到文档中。

第一个是最佳实践，我建议将样式标签完全保留在您的文档之外，但绝对不要在您的文档正文中。放置在脚本标签上方的外部样式表是可行的方法……对于 font awesome 的外部托管 css 也是如此。浏览器不应该挂在渲染上，除非您的链接出现在引起浏览器注意的脚本元素之后。

* 编辑 *

然而this的帖子与我刚才所说的直接矛盾。

【讨论】：

您的答案主要基于全部或第一组完整的 css 内容。我正在寻找适用于部分文档或不适用于任何地方的 css 内容，然后会发生什么。
希望它是正确的：“......根据我的经验，css 的加载几乎是瞬间的......”所以，+1。当最后发现一些 CSS 时，我正在寻找一些关于重绘时间等的数据。

【解决方案2】：

CSS 有两种级联。

小级联：这是对单个样式表的解析

大级联：这是浏览器执行三个“小级联”的地方，顺序如下：

用户代理（Web 浏览器的本机样式表）
作者（您编写的样式表）
用户（最终用户可以编写的样式表）。

您的问题是如果您将样式放在除头部之外的任何位置会发生什么。让我们讨论：

浏览器在后台有自己的原生样式表
浏览器首先加载您的 HTML 文档
然后浏览器读取<head>
浏览器加载<head>中的资产
浏览器解析文档的其余部分，即<body>。位于此处的资产和样式规则将最后处理。
最后一个<style> 块，或文档中的最后一个样式表，其样式优先于其他所有内容。

简而言之，浏览器会按照样式出现的顺序应用样式。页脚的样式表会使事情变得更糟，而不是更好。我无法提供更糟糕的量化衡量标准，因为我没有您的样式表或网站。

所有浏览器都有 FOUC（或 FOUT）。它的持续时间取决于浏览器的速度和样式表的质量。在重置后立即应用文本样式并在其他样式之前应用文本样式的缩小样式表通常具有最少的 FOUC。

页脚中的样式不会被阻止处理，它们也不会阻止<head> 中的样式。页脚中的样式只是最后处理。

【讨论】：

您谈到将样式放在底部而不是头部。但我的问题是——当 CSS 的某些部分仅处于底部时会发生什么。大多数情况下，所有的 CSS 都像往常一样在头部，但只有少数在底部。会不会造成阻塞？会不会产生连锁反应？它是否会导致所有文档或部分文档的重绘，其中浪费了多少资源等
我稍微修改了我的答案来回答你的问题。页脚中的样式不会被阻止，也不会被阻止。它们最后被处理。页脚样式表中的选择器是唯一接受“重绘”的项目。
假设你是正确的 - “......他们不会阻止中的样式，要么......”，所以 +1。谢谢。我正在寻找衡量标准和统计数据。我知道的简单答案。

【解决方案3】：

感谢 Jeremythuff 的回答，但我也想回答，希望对您有所帮助。

下载 CSS 文件大约需要一些时间（如果未缓存且未内联）+ 片刻。正如您已经提到的，这一时刻取决于 CPU、GPU、HD 速度（如果缓存）和内容 + 脚本。在实际实践中，由于下载时间的原因，您不想在正文末尾使用 [link href="..."/]。

您也不想使用内联样式，因为它们没有被缓存，这是用户将使用 html 下载的另一段代码，但是，此解决方案可以使用小型内联样式。在实践中，它不会产生眨眼。

我推荐以下架构：

头部 > 主要 CSS > 正文 > HTML > 附加 CSS > 脚本

如果脚本改变了元素的默认行为（例如阻止点击链接），我建议将脚本放在 head 中。

现在关于字体。在我看来，使用外部字体是一种不好的做法。但是，如果您愿意，最好将字体包含在 head 中，因为您可能无法将它们内联在 style 标记中。所以这里就出现了下载时间问题。

10 个图标对于现在的 CPU 来说根本算不了什么，即使在手机上也是如此。

我的建议很简单：

（如果跨设备，我也会考虑页面重量，因为移动网络慢）

有大量的附加 css（有和没有 css 的 html 的大小之间存在显着差异） - 不包括在末尾，也不作为 [style]...[/style]（从不缓存），也不作为 [link href= “...”]（需要下载时间）。
有一些额外的 css - 尝试在脚本之前的正文末尾添加 [style]...[/style]。
不用担心 10 个图标渲染，担心第一次访问用户的下载时间（字体）。

【讨论】：

你的第一点，不是告诉在哪里放置大型 CSS。你说不要放在任何地方。我还想了解如何测量或任何已经可用的测量。我知道简单的答案，但我想回答测量或已经测量并在此处呈现的解释。谢谢

【解决方案4】：

你的问题很有趣……但是有一个问题：

CSS 样式表必须放在`<head>`!!

（除非它们被挖出）

否则，您的 html 标记无效。然后，每个浏览器都可以以不同的方式处理它。

【讨论】：

Google 自己说，只将重要的 CSS 放在首位。我现在不记得规则了，否则我会给你的。虽然我不喜欢那样但是..
是的，正确的，我们真的不需要放入，这取决于你的CSS代码

头部 > 主要 CSS > 正文 > HTML > 附加 CSS > 脚本

我的建议很简单：

CSS 样式表必须放在&lt;head&gt;!!

CSS 样式表必须放在`<head>`!!