Question

我观察到，很少有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>

由于这是一个非常短暂的视觉故障，我不知道是什么引起了它。更糟糕的是，我无法重现它，它只出现在很少的场合。如何进一步调查故障的原因？我应该注意哪些最佳实践？

Answer 1

这称为FOUC，Flash of Unstyled Content，并且在此处有详细记录和解释：http://www.bluerobot.com/web/css/fouc.asp/

Answer 2

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

Answer 3

FOUC与加载CSS和JS文件等外部资产的顺序有关。内联脚本片段会阻止后续资产的下载，直到它们被解释为止。这是FOUC的原因之一。

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

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

Answer 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>

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

4 个答案: