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

Я заметил, что очень редко 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>

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

Источник

4 ответа

Решение

Это называется FOUC, флеш-контент без стиля, и хорошо документирован и объяснен здесь: http://www.bluerobot.com/web/css/fouc.asp/

Источник

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

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

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

Источник

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

Источник

У меня была такая же проблема. Я просто переключил порядок загрузки таблиц стилей и 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>
Источник
Другие вопросы по тегам