l3ftoverz
@l3ftoverz
Люблю Финский металкор

Почему firefox «мигает» при рендеринге страницы (без стилей -> к стилям)?

Решил посмотреть что тут в FireFox, говорят тут инструменты разработчика лучше (правда пока не вижу в каких моментах) и якобы приватно всё.

Проблема: например жму f5 просто на тостере и на секунду вижу сайт без стилей, SVG иконку на пол страницы. Бесит жесть. Это исправимо? Или это проблема тех, кто писал фронтенд тостера?
  • Вопрос задан
  • 504 просмотра
Решения вопроса 4
Скорее всего это особенность firefox, потому что в chrome такого не наблюдается.
Да и стили жирненькие.
Ответ написан
@mishkaaaaaa
Да, это особенность firefox. Может, это не баг, а фича их особенного движка, потому что в хромиум-браузерах такого нет
Ответ написан
@NubasLol
Потому что стили грузятся отдельно от документа
Ответ написан
@Flying
Причина наблюдаемого вами поведения может стать для вас более понятной если вы включите network throttling в обоих браузерах, отключите кэш и попробуете загрузить страницы. Вот скриншот из Chrome:
5e00afdc6a4da118516614.png
как видно - первое отображение страницы на экране происходит после того как загрузились её стили. Если ещё немного поискать - можно найти вот эту ссылку из которой ясно что эта функциональность появилась в Chrome 56 и является специфичной для этого браузера.

Как пользователь Firefox я рад что Firefox не реализует аналогичный подход у себя. Отсутствие скрытия страницы до момента загрузки стилей позволяет пользователю получить доступ к информации на странице ещё до того как она загрузилась полностью, это может быть важным, особенно в случае плохого качества сети. Кроме того отсутствие какой-либо индикации загрузки в случае Chrome приводит к тому что пользователь (особенно обычный пользователь, не знающий как это работает на самом деле) может просто уйти т.к. с его точки зрения "ничего не работает".

Или, представьте себе, к сожалению вполне возможный в нашей реальности сценарий когда стили лежат где-то на внешнем CDN, а его IP заблокирован. В этом случае в Chrome вам придётся любоваться пустой страницей как минимум до network timeout'а, а это секунд 30 минимум. В случае же Firefox вы, возможно, сможете получить информацию за которой пришли.

Конечно отображение конкретно Хабр Q&A оставляет желать лучшего. Во-многом из-за SVG иконок которые при загрузке вполне могут становиться размером в экран, что мешает ограничить их размер - неясно. Также и другие картинки, вставляемые в ответы, некоторые из которых вполне могут быть в 2500px по ширине - тоже добавляют радости. В идеале это решается добавлением Critical path CSS который бы встраивался в страницу и сохранял адекватный layout до момента загрузки основных стилей, но отсутствие его - это вопрос к команде разработчиков сайта, а не к браузеру.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы