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

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

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

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 подписчик
- час назад
- 7 просмотров
0

ответов
HTML

+1 ещё

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

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 4 часа назад
- 27 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 8 часов назад
- 45 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 9 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 13 часов назад
- 57 просмотров
1

ответ
1С-Битрикс

Простой
Bitrix + Аспро: Next – как скрыть стоимость товаров цена которых ровна нулю?
- 1 подписчик
- 13 часов назад
- 17 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 14 часов назад
- 37 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 15 часов назад
- 29 просмотров
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 15 часов назад
- 85 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Смонтировать видео

23 нояб. 2024, в 01:31

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

Настроить сайт

23 нояб. 2024, в 00:16

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

Разобрать текущий ETL-процесс

22 нояб. 2024, в 23:55

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

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

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

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

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

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