2

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

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

4

4 回答 4

4

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

于 2010-03-08T07:10:08.290 回答
0

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

于 2010-03-08T06:49:58.903 回答
0

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

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

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

于 2010-03-08T07:15:19.740 回答
0

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

像这样：

<head>
 <title><%= full_title yield(:title) %></title>
 <%= stylesheet_link_tag    :application, media: "all" %>       
 <%= javascript_include_tag :application %>       
 <%= csrf_meta_tags %>
</head>
于 2013-06-19T22:58:19.660 回答