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

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

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

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

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

Помогут разобраться в теме Все курсы

Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Академия Eduson

Fullstack-разработчик на JavaScript

11 месяцев

Далее

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

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

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

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

CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 15 часов назад
- 58 просмотров
2

ответа
CSS

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

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

Средний
Почему при выгрузке данных из 1С в Битрикс длина строки,всего 1024, хотя поле имеет тип данных Текст/HTML, а добавление текста вручную работает?
- 1 подписчик
- вчера
- 116 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 130 просмотров
0

ответов
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 85 просмотров
1

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

Простой
Почему фильтр в корне папки catalog открывает 404?
- 2 подписчика
- 28 окт.
- 49 просмотров
0

ответов
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 2 подписчика
- 28 окт.
- 90 просмотров
1

ответ
PHP

+1 ещё

Простой
Как оптимально подтягивать og:img для списка статей с разных сайтов?
- 1 подписчик
- 27 окт.
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 170 просмотров
2

ответа
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 131 просмотр
1

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

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

Web-разработчик/WordPress программист (Full-stack)

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

от 130 000 до 150 000 ₽

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

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

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

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

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

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