Почему Javascript вызывает FOUC

Question

Почему Javascript вызывает FOUC

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

Как я могу убедиться, что Javascript не начинает загружаться до тех пор, пока страница не загрузится? Это уже свободно использовать

 $(document).ready(function(){ /*. . .*/});

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

1

javascript jquery onload domready fouc

Источник

user925897 16 янв '13 в 18:44

2 ответа

Другие вопросы по тегам javascript jquery onload domready fouc

user485406 16 янв '13 в 19:01 2013-01-16 19:01 · Answer 1 · 2013-01-16 19:01

$(document).ready() означает, что DOM готов, но не обязательно, что страница полностью загружена. Если вы хотите подождать, пока страница загрузится, используйте события загрузки тела или окна.

1

Источник

user485406 16 янв '13 в 19:01

user437456 16 янв '13 в 18:57 2013-01-16 18:57 · Answer 2 · 2013-01-16 18:57

Первое, что я бы попробовал, это изменить порядок ваших скриптов и тегов стиля, чтобы все внешние CSS-файлы были включены до любых файлов JavaScript.

Я провел аудит, используя инструменты разработчика Chrome, и нашел 13 таблиц стилей, которые включены в файл javascript. Поскольку браузеры, как правило, допускают только 2 одновременных подключения, вы можете увидеть эту вспышку, если HTML-файл загружается, но загрузка таблицы стилей ставится в очередь за каким-то другим ресурсом.

Это также объясняет, почему в комментариях так много других людей испытывают трудности с воспроизведением того, что вы видите, - у них разные скорости соединения и тому подобное.