Быстрый XHR в head. Динамические стили: быстро и просто. Оптимизация структуры веб-страниц
XHR в body
XHR в head
Быстрый XHR в head
DOM-метод
Результаты
Выводы
В следующем варианте проверялось прямо добавление стилевых правил к innerHTML в head (для тех браузеров, которые это поддерживают). Оказалось, что это вариант даже медленнее, чем предыдущий.
Если осуществлять это относительно обычного HTML-документа, то DOM-дерево изменяется быстрее (в IE6/7), поэтому на данный момент в общем случае практикуется именно такой подход.
var text = xhr.responseText;
var head = document.getElementsByTagName('head')[0];
if (/WebKit|MSIE/i.test(navigator.userAgent)) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.innerText = text;
}
head.appendChild(style);
} else {
head.innerHTML += '';
}