Вот несколько моментов, которые помогут лучше понять концепцию.
Это противоречит веб-стандартам, встраивая CSS в HTML (которые должны быть разделены).
Помещение правил CSS в заголовок документа в тегах <style> совершенно нормально и приемлемо, если оно служит определенной цели, как в случае, который вы описываете. В мире, где мы работаем с такими вещами, как styled-components и css-in-js, нет места для такого рода обобщений (имеется в виду «такие нелепые практики»)
а также создание FOUC, когда CSS загружает
Если вы правильно подготовили свой критический CSS, тогда должны быть все верхние правила для каждой точки останова, и не произойдет никакого верхнего FOUC. В остальной части страницы, если у вас есть хорошо оптимизированная страница, скорее всего, никому не удастся увидеть, как происходит FOUC. Это произойдет очень быстро и ниже видимого содержимого.
Нет никакой разницы в реальном времени между правильной загрузкой CSS с использованием a в заголовке и отложением ее на потом, поэтому нет реальной необходимости откладывать загрузку таблицы стилей.
В больших проектах файлы css не состоят из 10 правил CSS и имеют размер 2 КБ. У вас может быть несколько связанных css (или несколько файлов css) с правилами стиля для сотен компонентов, шаблонов и страниц, в то время как вам может потребоваться только несколько правил для вашего верхнего содержимого. Когда браузеры натыкаются на связанный файл css, он немедленно останавливает рендеринг страницы, отправляет запрос на конкретный актив и не продолжает процесс рендеринга, пока не завершит получение таблицы стилей и анализ ее содержимого. Это время имеет значение. Это время до того, как прорисовывается первый пиксель на экране. С помощью вышеупомянутой техники вы можете позволить своему браузеру начать рисование, как только он получит документ, без блокировки его пути css (если у вас нет других блокирующих ресурсов)
Для загрузки страницы по-прежнему требуется такое же количество времени.
- Не всегда требуется одинаковая сумма.
- Оптимизация производительности зависит не только от того, сколько времени требуется, чтобы фактически завершить загрузку каждого бита страницы / ресурсов и т. Д., Но также от того, насколько быстро вы можете предоставить пользователю полезный контент (или любой контент), и многое другое ...
Почему веб-гигант Google предлагает такие нелепые методы, которые не соответствуют стандартам и создают проблемы времени загрузки, такие как FOUC? Как будто люди, которые придумывают эти идеи, не имеют понятия о стандартах.
То, что я уже упомянул, уже должно дать ответ на этот вопрос, поэтому я просто хочу дать вам совет. В компаниях этого типа есть много действительно талантливых и опытных людей (которые даже участвуют в написании веб-стандартов и инструментов и т. Д.). Если вы чего-то не понимаете с первого взгляда, проведите дополнительное исследование, спросите (как вы :-)) и попытайтесь понять причины того, что вы считаете неправильным. В большинстве случаев кто-то обнаружит, что причиной, по которой он считал некоторые вещи «нелепыми» и «противоречащими стандартам», было его неполное понимание, а не то, что они «не имели понятия о стандартах».
person
Alekos Dordas
schedule
21.11.2019
