2

ごくまれに、Internet Explorer (7 か 8 かは問いません) が、CSS を適用せずに当社の Web ページ ( www.epsitec.ch ) を短時間表示することを確認しました。レイアウトは完全に壊れて表示され、すべてが上から下に順番に表示されます。ページの読み込みが完了すると、最終的にすべてが適切に表示されます。

私たちのウェブページは複雑なスクリプトを使用しておらず、ページの最後に QuantCast と Google Analytics 用の 2 つの 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>

次に、JavaScript を含む最後のチャンクまで静的 HTML に従います。

    ...
    <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 (スタイルのないコンテンツのフラッシュ) と呼ばれ、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 の原因の 1 つです。

フロントエンドのパフォーマンスと FOUC を回避するためのベスト プラクティスは、CSS ファイルをドキュメント内で参照し、 JavaScript を終了タグ<head>の直前に置くことです。</body>

これにより、ブラウザーはスタイルをダウンロードし、ページをレンダリングしてから、JavaScript を適用します。

于 2010-03-08T07:15:19.740 に答える
0

私はこれと同じ問題を抱えていました。スタイルシートと JavaScript が の head に読み込まれる順序を入れ替えただけです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 に答える