Каков будет лучший способ загрузить асинхронный CSS?

У меня есть девять разных файлов CSS. Мой веб-сайт не загрузится, пока браузер не загрузит все файлы CSS. Большая часть CSS даже не нужна для домашней страницы. В JavaScript вы можете сделать как <script async>,

но для таблиц стилей, что будет лучшим решением?

Я искал, нашел следующие статьи Code Pen

keithclark.co.uk

Они рекомендуют использовать

  <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

или же

 <head>
        <!-- head content -->
        <link rel="stylesheet" href="style.css" media="bogus">
    </head>
    <body>
        <!-- body content -->
        <link rel="stylesheet" href="style.css">
    </body>
Источник

1 ответ

По умолчанию CSS рассматривается как ресурс блокировки рендеринга, что означает, что браузер не будет отображать обработанный контент до тех пор, пока не будет создан CSSOM. Убедитесь, что ваш CSS прост, как можно быстрее, и используйте типы мультимедиа и запросы, чтобы разблокировать рендеринг.

- Разработчики Google

  • По умолчанию CSS рассматривается как ресурс блокировки рендеринга.
  • Типы медиа и медиазапросы позволяют нам пометить некоторые ресурсы CSS как блокировку без рендеринга.
  • Браузер загружает все CSS-ресурсы, независимо от того, блокирует или неблокирует их поведение.

CSS является ресурсом блокировки визуализации. Получите его клиенту как можно быстрее и как можно быстрее, чтобы оптимизировать время первого рендеринга.

Однако что, если у нас есть некоторые стили CSS, которые используются только при определенных условиях, например, когда страница печатается или проецируется на большой монитор? Было бы неплохо, если бы нам не пришлось блокировать рендеринг на этих ресурсах.

CSS "типы мультимедиа" и "медиазапросы" позволяют нам рассмотреть следующие варианты использования:

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Используя медиа-запросы, мы можем адаптировать нашу презентацию к конкретным случаям использования, таким как отображение по сравнению с печатью, а также к динамическим условиям, таким как изменения ориентации экрана, события изменения размера и многое другое. При объявлении ресурсов таблицы стилей обратите особое внимание на тип носителя и запросы; они сильно влияют на производительность критического пути рендеринга.

Давайте рассмотрим несколько практических примеров:

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">
  • Первое объявление - блокировка рендера и совпадение при любых условиях.
  • Второе объявление также является блокировкой рендеринга: "все" является типом по умолчанию, поэтому, если вы не указываете какой-либо тип, для него неявно устанавливается "все". Следовательно, первое и второе объявления фактически эквивалентны.
  • Третье объявление имеет динамический медиа-запрос, который оценивается при загрузке страницы. В зависимости от ориентации устройства во время загрузки страницы Portrait.css может блокировать или не блокировать рендеринг.
  • Последнее объявление применяется только при печати страницы, поэтому оно не блокируется при первой загрузке страницы в браузере.

Источник - Визуализация блокировки CSS -

Источник
Другие вопросы по тегам