Реализация

Идея заключается в том, чтобы перебрать все объявленные таблицы стилей, а в них – все правила и их конечные объявления. Для этого мы начнем с массива document.styleSheets.

function simplifyCSSExpression() {

try {

var ss = document.styleSheets;

var i = ss.length

while (i‑‑ > 0) {

simplifyCSSBlock(ss[i]);

}

}

catch (exc) {

alert("Обнаружили ошибку при обработке css. Страница будет " +

"работать в прежнем режиме, хотя, возможно, не так “ +

“быстро");

throw exc;

}

}

В таблицах стилей мы пройдемся по массиву импортируемых таблиц (@import), а затем уже по объявлениям стилевых правил. Для того чтобы не совершать пустых телодвижений, будем проверять, что cssText содержит expression(constExpression).

function simplifyCSSBlock(ss) {

// Проходимся по import'ам

var i = ss.imports.length;

while (i‑‑ > 0)

simplifyCSSBlock(ss.imports[i]);

// если в cssText'е нет constExpression, сворачиваемся

if (ss.cssText.indexOf("expression(constExpression(") == ‑1)

return;

var rs = ss.rules;

var rl = rs.length;

while (rl‑‑ > 0)

simplifyCSSRule(rs[j]);

}

Затем мы уже можем обрабатывать для каждого правила cssText и заменять его, используя функцию simplifyCSSRuleHelper, чтобы текст объявления из динамического становился статическим.

function simplifyCSSRule(r) {

var str = r.style.cssText;

var str2 = str;

var lastStr;

// обновляем строку, пока она еще может обновляться

do {

lastStr = str2;

str2 = simplifyCSSRuleHelper(lastStr);

} while (str2 != lastStr)

if (str2 != str)

r.style.cssText = str2;

}

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

function simplifyCSSRuleHelper(str) {

var i = str.indexOf("expression(constExpression(");

if (i == ‑1)

return str;

var i2 = str.indexOf("))", i);

var hd = str.substring(0, i);

var tl = str.substring(i2 + 2);

var exp = str.substring(i + 27, i2);

var val = eval(exp)

return hd + val + tl;

}

Наконец, нам нужно добавить вызов simplifyCSSExpression при загрузке страницы.

if (/msie/i.test(navigator.userAgent) && window.attachEvent != null) {

window.attachEvent("onload", function () {

simplifyCSSExpression();

});

}

Все так просто? Нет, еще проще

А еще можно использовать свойства currentStyle (доступное для чтения) и runtimeStyle (доступное для записи), чтобы переопределять само стилевое свойство при его объявлении (звучит несколько сложно, не так ли?). На самом деле все чрезвычайно просто. Применительно к нашему примеру мы должны будем написать:

#myDiv {

border: 10px solid Red;

width: expression(runtimeStyle.width = (ieBox ? '100px' : '80px'));

}

Например, можно дописать исправление всплывания alt вместо title для картинок:

img {

behavior: expression( (alt&&!title) ? title = '' : '',

runtimeStyle.behavior = 'none'

)

}

Или прозрачность через фильтр:

.button1 { opacity: .1 }

.button2 { opacity: .2 }

.button3 { opacity: .3 }

.button4 { opacity: .4 }

.button1, .button2, .button3, .button4

{ filter: expression( runtimeStyle.filter =

'alpha(opacity='+currentStyle.opacity*100+')' ) }

Таким образом, наше выражение быстро применяется при загрузке страницы и последующем создании новых узлов скриптом. Такой способ оптимизации подходит только для «статичных» элементов, которым не нужно менять свое отображение динамически. Изменение родительского класса, равнение по высоте окна и эмуляция position: static – все это проблемные участки оптимизации. Лучше их не оптимизировать, а использовать пореже.

Еще одним проблемным местом, на мой взгляд, является общее выполнение скриптов при onresize. Ну и еще серьезный совет: используйте CSS‑выражения по минимуму. Лучше всего будет, если они вообще не встретятся у нас сайте.

6.2. Что лучше, id или class?

Далее давайте рассмотрим, как использование id или class влияет на скорость отображения страницы в браузере (сейчас речь не идет о множественном использовании одинаковых id – это и так запрещено спецификацией). Если элемент на странице встречается единственный раз (например, «шапка» или «подвал»), то мы можем с равным успехом использовать id и class для его стилизации.