Подтвердить что ты не робот

Как загрузить CSS асинхронно

Я пытаюсь исключить 2 файла CSS, которые блокируют рендеринг на моем сайте, - они появляются в Google Page Speed ​​Insights. Я придерживался разных методов, ни один из которых не был успешным. Но недавно я нашел сообщение о Thinking Async и когда я применил этот код: <script async src="https://third-party.com/resource.js"></script> он устранил проблему.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Уловкой запуска асинхронной загрузки стилей является использование элемента <link> и установка недопустимого значения для атрибута media (я использую media = "none", но любое значение будет делать). Когда медиа-запрос оценивается как false, браузер все равно будет загружать таблицу стилей, но он не будет ждать, пока контент будет доступен до отображения страницы.

<link rel="stylesheet" href="css.css" media="none">

После того, как таблица стилей закончила загрузку, атрибут media должен быть установлен на допустимое значение, поэтому правила стиля будут применены к документу. Событие onload используется для переключения свойства media на все:

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

Этот метод загрузки CSS будет доставлять полезный контент посетителям намного быстрее, чем стандартный подход. Критический CSS все еще может быть использован с обычным блокирующим подходом (или вы можете встроить его для максимальной производительности), а некритические стили могут быть постепенно загружены и применены позже в процессе синтаксического анализа/рендеринга.

Этот метод использует JavaScript, но вы можете обслуживать не-JavaScript-браузеры, обертывая эквивалентные блокирующие элементы <link> в элементе <noscript>:

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

Вы можете увидеть операцию в www.itcha.edu.sv

введите описание изображения здесь

Источник в http://keithclark.co.uk/

Ответ 2

Preload

Теперь вы можете использовать ключевое слово preload для элементов link.

Версия синхронизации:

<link href="style.css" rel="stylesheet">

Асинхронная версия:

<link href="style.css" rel="preload" as="style">

Примечание

Эта функция только недавно стала широко поддерживаемой среди современных браузеров. Если вам требуются запасные версии для старых браузеров, используйте loadCSS.

Обновление (18.07)

Эта функция была отключена по умолчанию в Firefox. Пока Firefox не реализует решение, loadCSS (упомянутый выше), вероятно, будет лучшим выбором. Комментарий ниже взят из этого обсуждения:

Мы решили использовать другой подход для rel= preload. я делаю не знаю когда это будет реализовано.

Ответ 3

Вы можете попытаться получить это разными способами:

1. Использование media="bogus" и <link> у подножья

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

2. Вставка DOM по-старому

<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>

3.Если вы можете попробовать плагины, которые вы можете попробовать    loadCSS

<script>
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css" );
</script>

Ответ 4

Функция ниже создаст и добавит в документ все таблицы стилей, которые вы хотите загрузить асинхронно. (Но благодаря Event Listener он будет делать это только после того, как все окна загружены другими ресурсами.)

Смотрите следующее:

function loadAsyncStyleSheets() {

    var asyncStyleSheets = [
    '/stylesheets/async-stylesheet-1.css',
    '/stylesheets/async-stylesheet-2.css'
    ];

    for (var i = 0; i < asyncStyleSheets.length; i++) {
        var link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', asyncStyleSheets[i]);
        document.head.appendChild(link);
    }
}

window.addEventListener('load', loadAsyncStyleSheets, false);

Ответ 5

Подходы асинхронной загрузки CSS

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

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Ответ 6

Если у вас есть строгая политика безопасности содержимого, которая не позволяет @vladimir-salgueroответить, вы можете использовать это (пожалуйста, запишите сценарий nonce):

<script nonce="(your nonce)" async>
$(document).ready(function() {
    $('link[media="none"]').each(function(a, t) {
        var n = $(this).attr("data-async"),
            i = $(this);
        void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
    })
});
</script>

Просто добавьте следующее к своей таблице стилей: media="none" data-async="true". Вот пример:

<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />

Пример для jQuery:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>

Ответ 7

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

Согласно Google, именно так вы должны реализовать асинхронную загрузку Css.

 < noscript id="deferred-styles" >
        < link rel="stylesheet" type="text/css" href="small.css"/ >
    < /noscript >

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

Ответ 8

Используя media="print" и onload="this.media='all'":

Группа накаливания недавно (июль 2019 г.) опубликовала статью, в которой приводятся их последние рекомендации по асинхронной загрузке CSS. Несмотря на то, что они являются разработчиками популярной библиотеки Javascript loadCSS, они фактически рекомендуют это решение, для которого не требуется библиотека Javascript:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Использование media="print" покажет браузеру не использовать эту таблицу стилей на экранах, а при печати. Браузеры действительно загружают эти таблицы стилей печати, но асинхронно, чего мы и хотим. Мы также хотим, чтобы таблица стилей использовалась после загрузки, и для этого мы установили onload="this.media='all'". При желании вы можете добавить запасной вариант <noscript> для редких пользователей, у которых не включен Javascript.

оригинальную статью стоит прочитать, так как она более детальна, чем я здесь. Эта статья на csswizardry.com также стоит прочитать.