CSS не блокирует рендеринг на Firefox Quantum

В Firefox Quantum я заметил "затруднение" при загрузке CSS некоторых веб-сайтов.

Одним из них является веб-сайт моей компании:

Или Github тоже:

В первом у нас есть только один файл CSS в разделе <head> наших страниц.

Кажется, что - только в Firefox Quantum - CSS не блокирует рендеринг страницы , как следует. Остальная часть страницы загружается без CSS для некоторых моментов, затем CSS применяется так, как если бы он загружался асинхронно (но это не так).

Очевидно, что такое поведение наблюдается не на всех сайтах, которые я посетил.

Я действительно понятия не имею, что происходит :)

Ответ 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.

Наконец, часто можно увидеть, как шрифты на веб-странице "обновляются" до предоставленных страницей веб-шрифтов, потому что они не блокируют первоначальный рендеринг по дизайну.