浏览器在短时间内显示没有样式的页面（视觉故障）答案

【问题标题】：Browser displays page without styles for a short moment (visual glitch)浏览器在短时间内显示没有样式的页面（视觉故障）
【发布时间】：2011-01-24 21:02:39
【问题描述】：

我观察到，Internet Explorer（7 或 8，没关系）很少会在不应用 CSS 的情况下短时间显示我们的网页 (www.epsitec.ch)。布局看起来完全被破坏了，所有东西都从上到下依次显示。页面加载完成后，所有内容终于可以正常显示了。

我们的网页没有使用任何花哨的脚本，仅在页面末尾添加了两个用于 QuantCast 和 Google Analytics 的 javascript。顺便说一句，在添加 QuantCast 脚本之前，我们已经遇到了问题。 CSS 链接在 <head> 部分：

<head>
  <title>Crésus Comptabilité</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
  <link href="../../style.css" rel="stylesheet" type="text/css" />
  ...
</head>

然后跟随静态 HTML 直到包含 JavaScript 的最终块：

    ...
    <div id="account">
      <a class="deselect" href="/account/login">Identifiez-vous</a>
      <script type="text/javascript">
        _qoptions={qacct:"..."};
      </script>
      <script type="text/javascript" src="http://edge.quantserve.com/quant.js">
      </script>
      <noscript>
        <img src="..." style="display: none;" border="0" height="1" width="1"/>
      </noscript>
    </div>
    <div id="contact">
      <a href="/support/contact">Contactez-nous</a>
    </div>
    <div id="ending"><!-- --></div>
  </div>
  <script type="text/javascript">
    ...
  </script>
  <script type="text/javascript">
    var pageTracker = _gat._getTracker("...");
    pageTracker._initData();
    pageTracker._trackPageview();
  </script>
</body>

由于这是一个非常短暂的视觉故障，我不知道是什么引起了它。更糟糕的是，我无法复制它，而且它只在极少数情况下出现。如何进一步调查故障的原因？有什么我应该注意的最佳做法吗？

【问题讨论】：

标签： css fouc

【解决方案1】：

这被称为FOUC，即无样式内容的 Flash，并在此处进行了详细记录和解释：http://www.bluerobot.com/web/css/fouc.asp/

【讨论】：

感谢您的参考。我们已经在标题中使用了<LINK> 元素，这应该可以防止 FOUC。我也会尝试添加一个空的脚本元素。交叉我的手指;-)

【解决方案2】：

我没有遇到问题，通常与互联网连接有关。 CSS 加载缓慢。

【讨论】：

【解决方案3】：

FOUC 与加载外部资源（如 CSS 和 JS 文件）的顺序有关。内联脚本 sn-ps 阻止下载后续资产，直到它们被解释。这是造成 FOUC 的原因之一。

前端性能以及避免 FOUC 的最佳实践是在结束 </body> 标记之前在文档的 <head> 和 JavaScript 中引用您的 CSS 文件。

这使得浏览器下载样式，渲染页面，然后应用 JavaScript。

【讨论】：

【解决方案4】：

我遇到了同样的问题。我只是在layouts/application.html.erb 的头部切换了样式表和javascript 的加载顺序。所以现在先加载样式表，然后加载 javascript。

像这样：

<head>
 <title><%= full_title yield(:title) %></title>
 <%= stylesheet_link_tag    :application, media: "all" %>       
 <%= javascript_include_tag :application %>       
 <%= csrf_meta_tags %>
</head>

【讨论】：