Async = true для тега ссылки css

В тегах HTML5 script можно загружать async через async=true

<script src="index.js" type="text/javascript" async="true"></script>

Есть ли эквивалент для ресурсов CSS? что-то вроде:

<link rel="stylesheet" type="text/css" async="true" href="style.css">

Обоснование заключается в том, чтобы заставить браузер загружать css и кэшировать его для последующих запросов, но остальную часть процесса разблокировать. Включите, скажем, заставку.

Ответы

Ответ 1

Я не думаю, что это сработает.

Но мы можем сделать это с помощью JS:

  var resource = document.createElement('link'); 
  resource.setAttribute("rel", "stylesheet");
  resource.setAttribute("href","path/to/cssfile.css");
  resource.setAttribute("type","text/css");      
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(resource);

Я думаю Что он достигнет того, что вы пытаетесь сделать.

Если вы не хотите, чтобы javascript посмотрел: Как загрузить CSS асинхронно без использования JavaScript?

Надеюсь, что это поможет.

Ответ 2

Лучший способ на сегодняшний день описан в следующем сообщении:
"Async" CSS без JavaScript
Я настоятельно призываю всех читателей прочитать статью, поскольку она следует глубоким исследованиям известных "хаков" и обходных решений.

"Кажется, этот трюк заставляет Chrome и Firefox запускать тело раньше, и они просто не блокируют таблицы стилей тела".

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> 
  <![endif]-->
</head>
<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

В статье также содержатся контрольные показатели:

alt text

Ответ 3

для асинхронной загрузки таблиц стилей, которая не блокирует рендеринг страниц, что мне очень помогло ((учитывая понимание pageSpeed))...

var stylesheet = document.createElement('link');
stylesheet.href = 'fontawesome.min.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);

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

Ответ 4

Что вы думаете о решении с использованием jQuery?

jQuery('head').append('<link rel="stylesheet" type="text/css" href="path/to/cssfile.css" />');

Ответ 5

загрузить css без блокировки рендера

<link rel="preload" media="(min-width:801px)" href="styledesk.css" as="style">
<link rel="stylesheet" media="(min-width:801px)" href="styledesk.css">

больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content