Реактивные веб-сайты

Случай был

выбран просто как базовый, потому что большое число узлов в DOM-дере-

ве делает такую операцию сразу менее эффективной, чем вставка в

. Да и стили внутри тела документа запрещены стандартами.

// чтобы не копировать всем известный код, запишем так:

var xhr = new XMLHttpRequest;

if (xhr) {

xhr.onreadystatechange = function() {

try {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

// вставим полученные данные прямо в

document.body.innerHTML +=

‘

‘;

}

}

} catch(e){}

};

xhr.open(«GET», ‘styles.css?’+Math.random(), true);

xhr.send(null);

}

Тут сразу возникает вопрос: как считать применение стилей? Ведь

у браузера нет такого события. Немного подумаем и вспомним всем из-

вестный и раскритикованный подход с использованием offsetHeight.

Он, конечно, будет не самым лучшим выбором, так как добавляет не-

большую задержку (пропорциональную числу узлов), но это будет допу-

стимо в рамках выбранного метода (число узлов постоянно для всех из-

мерений).

———————— Page 159————————

158 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Итак, для снятия времени применения CSS-правил использовалась

следующая конструкция (которая запускалась сразу после обращения к

внешнему файлу):

var start = new Date();

var _timer = setInterval(function(){

// находим известный элемент документа и проверяем,

// применились ли к нему стили

if (document.getElementById(‘neck’).offsetHeight < 300) {

// сообщаем о применении

alert(‘CSS files loaded in ‘+(new Date() — start));

// убиваем таймер

clearInterval(_timer);

}

}, 10);

Конечно, на время загрузки влияют сетевые задержки. Для борьбы с

ними (и не только) бралась серия из 15 замеров, и значения, превосходя-

щие текущее среднее более чем в 2 раза, просто отбрасывались (для кон-

троля 3-дельта-выбросов).

Все результаты приведены в конце раздела.

5.1.3. XHR ‚ head

В этом случае код вставлялся уже в и применялся ряд мето-

дов для разных браузеров (ибо не все хотели через innerHTML или

innerText вставлять полученные данные).

var text = xhr.responseText;

var head = document.getElementsByTagName(‘head’)[0];

var style = document.createElement(‘style’);

style.type = ‘text/css’;

// для IE

if (style.styleSheet) {

style.styleSheet.cssText = text;

} else {

// для Safari/Chrome

if (style.innerText == ») {

style.innerText = text;

// для остальных

———————— Page 160————————

9

5

Оптимизация структуры веб-страниц 1

} else {

style.innerHTML = text;

}

}

head.appendChild(style);

5.1.4. A?OU??E XHR ‚ head

В следующем варианте проверялось прямое добавление стилевых

правил к innerHTML в (для тех браузеров, которые это поддер-

живают). Оказалось, что это вариант даже медленнее, чем предыду-

щий.

Если осуществлять это относительно обычного 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 += »;

}

5.1.5. DOM-IAUO‰

И, наконец, хит сезона. Добавляем новый файл стилей прямо в

при помощи DOM-методов.

var link = document.createElement(‘link’);

document.getElementsByTagName(‘head’)[0].appendChild(link);

link.setAttribute(‘type’,'text/css’);

link.setAttribute(‘rel’,'stylesheet’);

link.setAttribute(‘href’,'style.css’);

———————— Page 161————————

160 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

5.1.6. eAAUI?U‡U?

Ниже приведена таблица по исследованным браузерам для всех ва-

риантов.