Предварительно загрузите шрифты @ Font-Face, чтобы остановить мерцание / задержку Firefox

Борьба с FOUT в Firefox: Firefox начинает повторную визуализацию текста ПОСЛЕ события window.load. Итак, я спрятал контент, как это делает Пол Айриш, но ПОСЛЕ window.load я все еще жду 200 миллисекунд (чтобы дать время FF для реального рендеринга), а затем показал страницу.

На моем сайте много изображений, поэтому для ускорения я сначала отправляю страницу без содержимого, а затем получаю содержимое с помощью вызова ajax. Это большая работа, чтобы удовлетворить FF, но результаты хорошие.

Это мой вариант Paul Irish, обратите внимание, что я использую отрицательный текстовый отступ вместо видимости, чтобы обслуживать посетителя, по крайней мере, быстрее:

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

По поводу этой проблемы, которую Пол Айриш называет FOUT (вспышка нестилизованного текста), было много дискуссий. Есть множество способов ограничить это

1 Размещение CSS в самом верху страницы перед любыми тегами скрипта

2 Минимизация размера файла шрифта

3 Кэширование браузера с заголовками истечения срока действия в далеком будущем

4 Gzip-архивирование вашего CSS и файла шрифта (WOFF не может быть сжат)

У Пола Айриша есть отличная статья об этом: Борьба с @ font-face FOUT < / а>

У Стива Содерса также есть отличная статья в своем блоге «Высокопроизводительные веб-сайты»: @ font-face и производительность