Почему стили при рендеринге применяются не сразу?

Question

Nikolino @Nikolino

Почему стили при рендеринге применяются не сразу?

Приветствую.

В битриксе есть такая фича "перенос всех js скриптов вниз". Переносит и инлайновые и файловые скрипты вниз перед закрывающим body
Css остались вверху

Теперь после этой правки, если посмотреть в Хроме (именно в нем) в режиме инкогнито и понажимать f5, то видно как стили к некоторым элементам применяются не сразу. В частности видно как ссылки изначально имеют дефолтный цвет html (синие), и только через доли секунды применяется стиль. Что интересно, что если заходить не в режиме инкогнито, то такого нет, стили отображаются сразу.
В Firefox и в режиме инкогнито и без инкогнито, такого тоже не происходит.

Также бликает выпадающее popup окно, которое, по идее, активируется и становится видимым по клику.

Записал GIF: https://i.imgur.com/KderbrX.gifv
Сама страница: alta-profil.ru/client-center/articles/kak-obshit-dom-saydingom/
Это происходит на всех страницах сайта.

JS не регулирует порядок подгрузки css файлов.

Вопрос задан более трёх лет назад
294 просмотра

9 комментариев

Подписаться 1 Простой 9 комментариев

Андрей Николаев @gromdron

Обновлял страницу и в Firefox и в Chrome и не увидел указанного Вами на скриншоте.

Написано более трёх лет назад
Nikolino @Nikolino Автор вопроса

Андрей Николаев, у меня такое происходит только в режиме инкогнито в хроме. Если в обычном режиме, то всё норм.
В принципе это не так важно, наверное. Режимом инкогнито мало кто пользуется. Но тем не менее, интересно почему не успевают прогрузиться стили.
А то что в GIF это происходит несколько раз. Это я F5 жал несколько раз подряд.

Или вы и смотрели в режиме инкогнито?

Написано более трёх лет назад
adovnik @adovnik
Жаль, что при скачивании страницы ошибка не воспроизводится. Поэтому только по догадкам:

Шрифты у Вас подгружаются под самый конец и поэтому вся верстка встряхивается. Подключите сверху прелоэдер. для шрифта. а потом для стилей. вдруг поможет
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="fonts/" as="font">

Потом видно как "флаги" все выпадают, а потом остается один и размер на лету меняется. У Вас задан размер ссылки 33px, а внутри неё svg на 640 px; Попробуйте задать размер svg инлайном сразу же. Браузер, когда рендерит заранее под флаг место оставит.

Это всё только мои догадки.
Написано более трёх лет назад
Nikolino @Nikolino Автор вопроса

adovnik, встряхивается это возможно да, из-за шрифтов. Но почему цвет ссылок изначально показывается дефолтный браузерный, а только чуть позже переходит в тот, который задан в стилях?
https://i.imgur.com/NSU5CR7.png

Файл стилей, минифицированный и сжатый, весит 88кб, что не так много. Первая часть этого файла стилей сразу показывается на странице, а вторая часть сразу подгрузиться почему-то не успевает.

Хотя это происходит не всегда, чаще да, чем нет.
Вот сделал раскадровку, тут всё норм:
https://i.imgur.com/AVZ45el.png

Вот сделал еще раз, и тут видно, что сначала появляется popup (который задан в стилях как hidden и только по клику становится visible), а потом он исчезает, потому что к нему применились подгрузившиеся стили hidden.
https://i.imgur.com/duSarfq.png

Написано более трёх лет назад
Nikolino @Nikolino Автор вопроса

Возможно глюк сжатия, по-моему сейчас стоит сжатие не GZIP на уровне конфига сервера (NGINX), а стоит модуль компрессии битрикса. Поговаривают, что он иногда глючит. Без сжатия, файл стилей весит 621кб. Но это уже другая история. Пока поправить и почистить лишнее не можем.

Написано более трёх лет назад
adovnik @adovnik

Nikolino, preload стилей совсем ничего не изменил?

Написано более трёх лет назад
Nikolino @Nikolino Автор вопроса

adovnik, пока не тестил это, не знаю даже как это работает. Нужен какой-то JS для этого?

Написано более трёх лет назад
adovnik @adovnik
Nikolino, ничего сложного. в хеде надо просто один линк задать:
<head> <link rel="preload" href="тут ссылка на стили.css" as="style">
Написано более трёх лет назад
Nikolino @Nikolino Автор вопроса

adovnik, не всё так просто, перед файлом стилей вставляется еще несколько файлов стилей (битрикса, шаблона и т.д.) поэтому чтобы ничего не поехало, это нужно делать для всех, сохраняя последовательность. Но и это не просто, потому что файлы стилей битрикса вставляются php функцией, а не просто link rel в шаблоне.

В любом случае поведение странное.
Насколько я понимаю, при скачивании браузер прерывается там где вставлен link rel, и пока полностью весь файл стилей не скачает, парсинг дальнейшего HTML приостанавливается. Так как в моем случае css файл вставлен в head, то браузер не должен парсить код в body пока не скачает весь css.

Шрифт Google Font Roboto очень популярный (на сайте VK он) поэтому, по идее, он вообще не скачивается, а берется из кеша браузера пользователей.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 6 часов назад
- 44 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 17 часов назад
- 84 просмотра
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 72 просмотра
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 82 просмотра
2

ответа
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1224 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 53 просмотра
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 84 просмотра
2

ответа
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 98 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Придумать альтернативный логотип к уже существующему

23 дек. 2024, в 07:27

1000 руб./за проект

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Обновлял страницу и в Firefox и в Chrome и не увидел указанного Вами на скриншоте.
Андрей Николаев, у меня такое происходит только в режиме инкогнито в хроме. Если в обычном режиме, то всё норм.
В принципе это не так важно, наверное. Режимом инкогнито мало кто пользуется. Но тем не менее, интересно почему не успевают прогрузиться стили.
А то что в GIF это происходит несколько раз. Это я F5 жал несколько раз подряд.

Или вы и смотрели в режиме инкогнито?
Жаль, что при скачивании страницы ошибка не воспроизводится. Поэтому только по догадкам:

Шрифты у Вас подгружаются под самый конец и поэтому вся верстка встряхивается. Подключите сверху прелоэдер. для шрифта. а потом для стилей. вдруг поможет
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="fonts/" as="font">

Потом видно как "флаги" все выпадают, а потом остается один и размер на лету меняется. У Вас задан размер ссылки 33px, а внутри неё svg на 640 px; Попробуйте задать размер svg инлайном сразу же. Браузер, когда рендерит заранее под флаг место оставит.

Это всё только мои догадки.
adovnik, встряхивается это возможно да, из-за шрифтов. Но почему цвет ссылок изначально показывается дефолтный браузерный, а только чуть позже переходит в тот, который задан в стилях?
https://i.imgur.com/NSU5CR7.png

Файл стилей, минифицированный и сжатый, весит 88кб, что не так много. Первая часть этого файла стилей сразу показывается на странице, а вторая часть сразу подгрузиться почему-то не успевает.

Хотя это происходит не всегда, чаще да, чем нет.
Вот сделал раскадровку, тут всё норм:
https://i.imgur.com/AVZ45el.png

Вот сделал еще раз, и тут видно, что сначала появляется popup (который задан в стилях как hidden и только по клику становится visible), а потом он исчезает, потому что к нему применились подгрузившиеся стили hidden.
https://i.imgur.com/duSarfq.png
Возможно глюк сжатия, по-моему сейчас стоит сжатие не GZIP на уровне конфига сервера (NGINX), а стоит модуль компрессии битрикса. Поговаривают, что он иногда глючит. Без сжатия, файл стилей весит 621кб. Но это уже другая история. Пока поправить и почистить лишнее не можем.
Nikolino, preload стилей совсем ничего не изменил?
adovnik, пока не тестил это, не знаю даже как это работает. Нужен какой-то JS для этого?
Nikolino, ничего сложного. в хеде надо просто один линк задать:
<head> <link rel="preload" href="тут ссылка на стили.css" as="style">
adovnik, не всё так просто, перед файлом стилей вставляется еще несколько файлов стилей (битрикса, шаблона и т.д.) поэтому чтобы ничего не поехало, это нужно делать для всех, сохраняя последовательность. Но и это не просто, потому что файлы стилей битрикса вставляются php функцией, а не просто link rel в шаблоне.

В любом случае поведение странное.
Насколько я понимаю, при скачивании браузер прерывается там где вставлен link rel, и пока полностью весь файл стилей не скачает, парсинг дальнейшего HTML приостанавливается. Так как в моем случае css файл вставлен в head, то браузер не должен парсить код в body пока не скачает весь css.

Шрифт Google Font Roboto очень популярный (на сайте VK он) поэтому, по идее, он вообще не скачивается, а берется из кеша браузера пользователей.

Почему стили при рендеринге применяются не сразу?

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

Минуточку внимания

Войдите на сайт