Загружать CSS только тогда, когда шаблон полностью отрисован

Question

У меня была ссылка на cdn таблицы стилей boostrap, из-за которой возникали некоторые проблемы с блокировкой рендеринга, из-за которых производительность моего сайта соответствовала Google Page Speed ​​Insights. Я решил эту проблему, взяв только необходимые выше css начальной загрузки и поместив их в файл crit_bootstrap.css. Когда страница полностью отображается, я все равно хочу загрузить этот CDN начальной загрузки для всех других стилей, которые не находятся над сгибом. Как я могу сделать это? Я попытался добавить его к заголовку моего документа в функции jquery document.ready, но, похоже, он по-прежнему вызывал проблемы с блокировкой рендеринга PSI, как это было до загрузки до рендеринга страницы.

Answer 1

Попробуй это:

$(document).ready(function(){
   $('head').append('<link rel="stylesheet" type="text/css" href="bootstrap.css">');
}

Answer 2

Попробуйте загрузить CSS на $(window).load() вместо $(document).ready(),

например:

  $(window).load(function() {
          $('head').append('<link rel="stylesheet" href="common.css" type="text/css" />');
    });

Answer 3

Использование

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

Кроме того, если вы хотите отключить FOUC навсегда, добавьте

body {
  overflow:hidden;
}

на ваш выше сгиб CSS и переопределить его в вашем async CSS с

body {
  overflow:auto;
}

Выше приведено только резюме. Если вам интересно, вот полный пост о методе: Современная асинхронная загрузка CSS, также содержащая полифил для неподдерживающих браузеров.

Это может показаться не большим улучшением по сравнению с другими подходами, но одно преимущество, которое приносит rel="preload", заключается в том, что поддерживающие браузеры начнут загружать файл раньше, чем, скажем, с таблицей стилей с несоответствующим значением мультимедиа.

Также прочитайте Preloading content. Поддержка для rel="preload" ограничивается Chrome, Opera и Safari, но последует больше (в частности, Firefox v59). Кроме того, если он не поддерживается, это не значит, что он не работает. Это только означает, что нет никакого улучшения по сравнению с использованием несуществующего rel тип.