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

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 файлов.

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

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 он) поэтому, по идее, он вообще не скачивается, а берется из кеша браузера пользователей.

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

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

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

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

Войти через центр авторизации

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

1С-Битрикс

Простой
Как вывести основной раздел инфоблока и его элементы?
- 1 подписчик
- 2 часа назад
- 12 просмотров
0

ответов
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 4 часа назад
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 5 часов назад
- 42 просмотра
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 6 часов назад
- 47 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 7 часов назад
- 66 просмотров
0

ответов
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 8 часов назад
- 45 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 9 часов назад
- 57 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 11 часов назад
- 100 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 11 часов назад
- 51 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 12 часов назад
- 73 просмотра
0

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

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

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Настройка сервера

18 апр. 2024, в 21:56

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

Помощь с водпресс

18 апр. 2024, в 21:00

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

Спарсить ссылки на все товары конкретного продавца в озон

18 апр. 2024, в 20:13

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

Обновлял страницу и в 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 он) поэтому, по идее, он вообще не скачивается, а берется из кеша браузера пользователей.

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

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

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

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