Ответ 1
Чтобы обобщить информацию из ошибки 1404468, "флэш-содержимое без стиля" ("FOUC") обычно происходит, когда перед загрузкой таблиц стилей что-то запрашивает информацию в зависимости от стилей:
- Сценарии на странице, которые принудительно перезаписывают макет/стиль и выполняются до загрузки таблиц стилей.
- рекомендовал "вставить все свои стили и убедиться, что любой скрипт, запрашивающий информацию о макете, идет после них".
- Будьте осторожны со сценариями
defer, которые могут выполняться до загрузки таблиц стилей (ошибка спецификации).
iframe, который загружается быстрее, чем таблицы стилей родительской страницы, вызывает компоновку родительской страницы по сложным причинам, описанным в ошибке.- Аддоны (пример), которые запрашивают информацию макета до завершения загрузки стилей (т.е. на
run_at: "document_end"). Firefox 60 (2018-05-09) исправил FOUC с помощью надстроек, которые запрашивали компоновку с помощьюrun_at: "document_idle", и несколько надстроек были исправлены примерно в одно и то же время. - В Firefox была ошибка, вызывающая ее на сайтах с
autofocus, особенно на GitHub. Также исправлено в Firefox 60.
Факторы, которые сами по себе не вызывают FOUC, но могут увеличить вероятность того, что он станет видимым:
- Firefox 53 уменьшил
nglayout.initialpaint.delay(что задерживает начальное рисование страницы после того, как она перестала блокироваться таблицами стилей, при условии, что HTML к этому времени не был полностью загружен) с 250 мс до 5 мс.- Если таблицы стилей, вызывающие FOUC, будут загружены до задержки, вы не увидите контент без стилей. С 5 мс это стало намного менее вероятно.
- Если сама HTML-страница загружается медленно, вы можете заметить, что некоторый контент перемещается по странице с большей вероятностью.
- Медленная сеть в сочетании с вышеупомянутыми факторами увеличивает шансы увидеть FOUC.
Наконец, часто можно увидеть, как шрифты на веб-странице "обновляются" до предоставленных страницей веб-шрифтов, потому что они не блокируют первоначальный рендеринг по дизайну.