Как правильно подключить css через js?

Question

[efimenko_b]

На PageSpeed Insights, было замечание, что подключение некоторых css блокировало моментальное отображение контента.
На просторах интернета нашел статью, где говориться что css можно подключить через js

function b(){
			var mass = ['css/bootstrap.min.css', 'css/font-awesome.min.css', 'style.css', 'css/media.css',];
			for(var i=0;i<mass.length;i++){
				var a=document.createElement("link");
		 		a.rel="stylesheet";
		 		a.href=mass[i];
		 		document.getElementsByTagName("head")[0].appendChild(a)
			}
var c=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;
c?c(b):window.addEventListener("load",b);

Правильно ли это вообще?
Дело в том что не все браузеры это поддерживают, к примеру это не работает в Сафари и в ие ниже 10го
Как вообще правильно сделать для оптимизации?
Может кто то даст ссылку на статью какую нибудь.
Заранее спасибо.

Answer 1

[Константин Китманов]

Дело в том что не все браузеры это поддерживают, к примеру это не работает в Сафари и в ие ниже 10го

Я еще во времена IE6 динамически менял CSS, создавая link. Что именно в данном коде не работает в Сафари и в IE10-?

Comments

[efimenko_b]

Блин извините, я случайно не все скопировал.
вот остаток кода
var c=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;
c?c(b):window.addEventListener("load",b);
В ие нижу 10го получаю : "requestAnimationFrame" не определено
В сафари просто не создаются линки.

[Константин Китманов]

efimenko_b: этому горюшку помочь легко (хотя и непонятно, нахрен тут requestAnimationFrame):

с = requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame|| function (fn) {setTimeout(fn, 0)}

[efimenko_b]

Константин Китманов: а правильнее будет просто написать window.onload = b; ?

[Константин Китманов]

efimenko_b: попробуйте, померяйте, посмотрите, что PageInsight скажет.
Смысл requestAnimationFrame в том, чтобы выполнить операцию, когда браузер свободен от перерисовки. Если до этого никакого CSS не подключено, то с какой стати что-то перерисовывать?

[efimenko_b]

Константин Китманов: теперь гугл агрится на сss которые блокируют.
А как вы все это дело подключаете?

[Константин Китманов]

efimenko_b: все CSS склеиваю в одну (точнее, препроцессор генерит одну), ее в head, все скрипты тоже в один, подключаю перед закрывающим </body>

Answer 2

[twobomb]

Все правильно только вот я не понял зачем нужны 2 нижние строчки, может вот это ты имел ввиду.

window.onload = function(){
      var mass = ['css/bootstrap.min.css', 'css/font-awesome.min.css', 'style.css', 'css/media.css',];
      for(var i=0;i<mass.length;i++){
        var a=document.createElement("link");
     		a.rel="stylesheet";
     		a.href=mass[i];
     		document.getElementsByTagName("head")[0].appendChild(a)
      }

Answer 3

[Анатолий]

Есть видео, где много времени уделяется оптимизации: www.youtube.com/watch?v=ri2XWgIt59U&index=12&list=WL
В частности описывается Ваш принцип: Т.е. есть минимальный css, который загружается сразу в head и он содержит все основные селекторы для отображения контента. Все остальные файлы с css подгружаются в js, когда документ уже загружен (т.е. через событие onload)

Если же важен именно код подгрузки на Js, то twobomb выше описал вполне рабочий вариант

Answer 4

[Сергей Мельников]

это работает во всех браузерах начиная с ie8

Comments

[efimenko_b]

Блин извините, я случайно не все скопировал.
вот остаток кода
var c=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;
c?c(b):window.addEventListener("load",b);
В ие нижу 10го получаю : "requestAnimationFrame" не определено
В сафари просто не создаются линки.

[Денис Инешин]

efimenko_b: чтобы реквестанимейшн фрейм заработал, воспользуйтесь полифилом: https://gist.github.com/paulirish/1579671

Answer 5

[GreatRash]

Нахрена тут requestAnimationFrame? Вы таким извратным образом решили событие DOMContentLoaded запилить что ли?

Answer 6

[WhiteSama]

делал по клику на ссылку, но можно поместить путь в скрипт.

$('a').onload(function() {
  $('link').attr('href',$(this).attr('rel'));
});

<a href="#" rel="/css/for_blind/css/black.css"></a>