Браузер на короткое время отображает страницу без стилей (визуальный сбой)

Я заметил, что очень редко Internet Explorer (7 или 8, неважно) отображает наши веб-страницы (www.epsitec.ch) в течение короткого времени без применения CSS. Макет кажется полностью сломанным, все отображается последовательно сверху вниз. Когда страница завершает загрузку, все, наконец, отображается правильно.

Наши веб-страницы не используют никаких причудливых скриптов, только два включения javascript для QuantCast и Google Analytics, сделанные в конце страницы. Кстати, у нас уже была проблема до добавления скрипта 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>

Поскольку это очень короткий визуальный глюк, я понятия не имею, что его провоцирует. Хуже того, я не могу воспроизвести его, и он появляется лишь в редких случаях. Как я могу дополнительно выяснить причину сбоя? Есть ли какие-либо передовые методы, о которых я должен знать?


css fouc
person Pierre Arnaud    schedule 08.03.2010    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Это называется FOUC, Flash Of Unstyled Content, и хорошо задокументировано и объяснено здесь: http://www.bluerobot.com/web/css/fouc.asp/< /а>

person deceze♦    schedule 08.03.2010
comment
Спасибо за ссылку. Мы уже используем элемент <LINK> в заголовке, который должен предотвратить FOUC. Я также попробую добавить пустой элемент сценария. Скрещу пальцы ;-) - person Pierre Arnaud; 08.03.2010

arrow_upward
0
arrow_downward

У меня не было проблем, обычно это связано с подключением к Интернету. CSS загружается медленно.

person Dustin Laine    schedule 08.03.2010

arrow_upward
0
arrow_downward

FOUC связан с порядком загрузки внешних ресурсов, таких как файлы CSS и JS. Фрагменты встроенного скрипта блокируют загрузку последующих ресурсов до тех пор, пока они не будут интерпретированы. Это одна из причин FOUC.

Лучшей практикой для повышения производительности внешнего интерфейса, а также предотвращения FOUC является ссылка на ваши файлы CSS в <head> вашего документа и ваш JavaScript прямо перед закрывающим тегом </body>.

Это заставляет браузер загружать стили, отображать страницу, а затем применять JavaScript.

person Razvan Caliman    schedule 08.03.2010

arrow_upward
0
arrow_downward

У меня была такая же проблема. Я просто поменял порядок, в котором загружались таблицы стилей и 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>
person jaywards    schedule 19.06.2013