在页脚上找到一些CSS代码时会发生什么

时间：2013-12-06 06:45:18

标签： css performance

我知道CSS用于决定网页上的布局和其他样式。如果CSS位于页面底部，则所有内容（html元素，文本，图像等）都将使用浏览器自己的样式显示，当浏览器找到我们的CSS时，它会再次为我们重新设计页面。它可能被称为重新粉刷！

所以，我明白重新绘制页面和用户看到它会非常难看（FOUT - 无格式文本的Flash - 作为专家命名）。但是，我仍然想了解：

  1. 这次重画可以花多少时间？大约值！我理解这可能取决于页面上的内容。 还会发生什么或可能发生什么？

  2. 我现在主要关注的是是关于使用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'

    3. 使用Del，使其不应该成为问题的主要部分。问题的主要部分是关于底部的一些CSS然后将通过测量给出或支持测量等重新绘制，阻塞等情况。

    在上述情况下，或者只有部分文档会受到底部CSS的影响，那么会发生什么？浏览器重绘所有内容，还有什么？它需要多长时间。假设，在<i>放置了10个图标时使用了font-awesome。

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

    基于各种设备的性能，以及当然的用户体验。谢谢。

    更新：我为自己和所有人提供了更多内容。 这是一个谷歌建议用于css的函数（delayLoadCss），用于下载内容。虽然，我不会那么极端，但是对于Font-Awesome类型的CSS呢？ enter image description here

4 个答案:

答案 0 :(得分：6)

根据我的经验，加载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帖子与我刚才所说的完全矛盾。

答案 1 :(得分：4)

CSS有两个级联。

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

The Big Cascade ：这是浏览器按以下顺序执行三个“小级联”的地方：

  1. 用户代理（网络浏览器的原生样式表）
  2. 作者（你写的样式表）
  3. 用户（最终用户可以编写的样式表）。

    4. 你的问题是如果你把风格放在任何地方而不是头部会发生什么。我们来讨论一下：

    1. 浏览器有自己的原生样式表位于后台
    2. 浏览器首先加载HTML文档
    3. 然后浏览器会读取<head>
    4. 浏览器在<head>
      5. 中加载资源
    5. 浏览器解析文档的其余部分，即<body>。此处的资产和样式规则将在最后处理。
    6. 最后一个<style>块，或者文档中的最后一个样式表是其样式超过其他所有样式的样式表。

      7. 简而言之，浏览器按照查看顺序应用样式。页脚的样式表会让事情变得更糟，而不是更好。我无法提供可量化的测量值，因为我没有您的样式表或网站。

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

      页脚中的样式不会被阻止处理，也不会阻止<head>中的样式。页脚中的样式最后处理完毕。

答案 2 :(得分：0)

我很欣赏Jeremythuff的答案，不过我也想回答并希望它对你有帮助。

大约需要一段时间来下载CSS文件（如果没有缓存而不是内联）+片刻。这个时刻取决于您已经提到的CPU，GPU，HD速度（如果缓存）和内容+脚本。在实际练习中，由于下载时间的原因，您不希望在主体末尾使用[link href =“...”/]。

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

我推荐以下架构：

HEAD＆gt;主要CSS＆gt;身体＆gt; HTML＆gt;附加CSS＆gt; SCRIPTS

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

现在关于字体。在我看来，使用外部字体是一种不好的做法。但是如果你想要，字体最好包括在头部，因为你可能无法在样式标签中内嵌它们。所以这里出现了下载时间问题。

即使在手机上，现在的10个图标也不算什么。

我的建议很简单：

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

  1. 具有大的额外的CSS（具有和不具有的CSS HTML的大小之间差异显著） - 不包括在端部也没有为[式] ... [/样式]（从不缓存），既不[链接HREF = “......”]（需要下载时间）。
  2. 有额外的小css - 在脚本之前在身体的末尾尝试[style] ... [/ style]。
  3. 不要担心10个图标渲染，担心第一个访问用户（字体）的下载时间。

答案 3 :(得分：0)

你的问题很有意思......但是有一个问题：

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

中（除非它们被舀取）

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

相关问题
最新问题