13

ちらつき/遅延を止めるためにフォントをプリロードする方法を誰かが理解しましたか？

4

2 に答える 2

18

ポール・アイリッシュがFOUT（スタイルのないテキストのフラッシュ）と呼ぶこの問題に関しては、多くの議論がありました。これを制限する方法はたくさんあります

1スクリプトタグの前のページの最上部にCSSを配置する

2フォントファイルのサイズを最小化する

3遠い将来の期限切れヘッダーを使用したブラウザーキャッシュ

4 CSSとフォントファイルをgzipで圧縮します（WOFFはgzipで圧縮できません）

Paul Irishがこれについて素晴らしい記事を書いています：@font-faceFOUTとの戦い

Steve Soudersは、彼のHighPerformanceWebサイトブログにもすばらしい記事を掲載しています。@font-faceand performance

于 2010-09-04T20:58:04.767 に答える
15

FirefoxでのFOUTとの戦い：Firefoxは、window.loadイベントの後にテキストのレンダリングを再開します。つまり、Paul Irishのようにコンテンツを非表示にしますが、window.loadの後も、200ミリ秒（実際のレンダリングにFF時間を与えるため）待ってから、ページを表示します。

私のサイトにはたくさんの画像があるので、これをスピードアップするために、私は最初にコンテンツなしでページをほとんど送信し、次にajax呼び出しでコンテンツを取得します。FFを満足させるのは大変な作業ですが、結果は良好です。

これは私のポールアイリッシュバリアントです。少なくともレイアウトをより速く訪問者に提供するために、可視性の代わりに負のテキストインデントを使用していることに注意してください。

    <script>
    (function(){
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
   // s.textContent = 'body{visibility:hidden}';
    s.textContent = 'body{text-indent:-9999px}';
    e.firstChild.appendChild(s);
    function f()
    { 
    var ffrendertime = setTimeout ( function(){s.parentNode && s.parentNode.removeChild(s)} , 200 ); 
    }
    addEventListener('load',f,false);
    setTimeout(f,2000); 
  }
})();
    </script>
于 2010-12-18T13:17:50.220 に答える