当在页脚上找到一些CSS代码时,究竟发生了什么

我了解CSS用于Web页面上的Layout和其他样式。如果CSS位于页面的底部，那么使用浏览器自己的样式将显示所有内容(html元素，文本，图像等)，当浏览器找到我们的CSS，然后再次为我们重新设计页面。它可能被称为重涂！

所以，我明白，它将看起来非常丑陋的重新绘制页面和用户看到它(FOUT – Flash的Unstyled文本 – 作为专家命名)。但是，我还想了解一下：

这个重画可以花多少时间？大概价值！我明白这可以取决于页面上的内容。
还有什么事情发生或可能发生？
>我现在主要关心的是使用font-awesome CSS文件(外部托管在自己的cdn下载css和字体文件)。我想知道如果我把它放在页面底部或延迟加载的情况下会发生什么情况？目前它放在< head>部分为

链接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处于底部时，我不知道实际发生什么。所以，如果你有任何视频或图像显示流程，那么请在这里提及。

将所有内容都放在设备的性能上，以及不同的用户体验。谢谢。

更新：我为自己和每个人都有更多的东西。
这是一个功能(delayLoadCss)，Google建议将CSS用于低于内容的内容。虽然，我不会去那个极端，但是为什么要这样做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。浏览器不应该停留在渲染上，除非它的链接出现在引起浏览器注意的脚本元素之后。

*编辑*

不过this的帖子直接跟我刚才说的矛盾。

当在页脚上找到一些CSS代码时,究竟发生了什么

解决方法

相关文章