CSS-оптимизация

Оптимизируем CSS expressions

CSS-производительность не находится сейчас в фокусе внимания при разработке клиентских приложений для браузера. Очень часто о некоторых ключевых моментах просто не знают (или забывают), и это может привести к появлению множества "узких" мест при работе веб-приложения, которые не зависят непосредственно от сервера или канала. Они все находятся на стороне браузера.

После того как доставка всех необходимых объектов для отображения страницы оптимизирована, можно приступать к рассмотрению других сторон клиентской производительности. Одно из них заключается в особенностях работы CSS-движка браузера и его взаимодействии с JavaScript. Давайте рассмотрим все по порядку.

CSS-выражения

CSS-выражения (англ. CSS expressions ) были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит выставить позицию элемента в зависимости от того, какого размера окно браузера.

#myDiv {
 position: absolute;
 width: 100px;
 height:	100px;
 left: expression((document.body.offsetWidth > 110 ? 
 	document.body.offsetWidth – 110 : 110) + "px");
 top: expression(document.body.offsetHeight - 110 + "px");
 background: red;
}

Не самый лучший способ решения поставленной задачи, но в качестве примера его достаточно.

Проблема с этими выражениями в том, что они вычисляются гораздо чаще, чем многие могли бы ожидать. Они вычисляются не только во время визуализации страницы и изменения размеров окна, но также при скроллинге и даже когда пользователь просто водит мышкой по странице. Это несложно отследить — достаточно добавить счетчик в искомое выражение.

Единственный способ избежать огромного числа вычисления CSS-выражений — использование одноразовых выражений, когда после проведения всех необходимых вычислений они устанавливают свойство CSS-стиля к какому-то конечному статическому значению, заменяя им CSS-выражение. В том случае, если необходимо динамически изменять свойство CSS-стиля по мере пребывания пользователя на странице, мы можем применить прием с обработчиками событий в качестве альтернативы. Если избежать использования CSS-выражений на странице не удается, то нужно помнить, что они могут вычисляться тысячи раз и тем самым повлиять на производительность всей страницы.

Динамические выражения

CSS-выражения позволяют не только вычислить CSS-свойство при объявлении стилей, но и поддерживать его постоянно в актуальном состоянии, чтобы заданное выражение было всегда верно. Это означает, что само выражение будет пересчитываться каждый раз, когда (это касается только рассмотренного примера) изменяется document.body.offsetWidth. Если бы не этот факт, динамические выражения, возможно, принесли бы большую пользу и получили бы более широкое распространение. Но это не так, и пересчет этой строки происходит каждый раз, когда заканчивается вычисления JavaScript. И не нужно быть гением, чтобы понять, что это приведет наше веб-приложение к "подвисанию".

Давайте рассмотрим следующий блок CSS-кода:

#myDiv {
 border: 10px solid Red;
 width:  expression(ieBox ? "100px" : "80px");
}

Даже при том предположении, что ieBox — это постоянный флаг, который выставляется в true, когда IE находится в режиме обратной совместимости, заданное выражение будет вычисляться каждый раз в "80px". Хотя выражение будет постоянным для данной страницы, оно все равно будет пересчитываться много раз. Основной вопрос заключается в том, как избавиться от этих ненужных вычислений.

Вычисление постоянных

Вот что мы собираемся сделать: пройтись по всем объявлениям стилей и заменить вычисление выражения его постоянным значением. В предыдущем примере, предполагая, что мы используем IE6 в стандартном режиме, нам хотелось бы видеть следующий код:

#myDiv {
 border: 10px solid Red;
 width:  80px;
}

Итак, как нам убедиться в том, что наше выражение постоянно? Самым простым путем является пометить само выражение, чтобы мы могли его легко обнаружить. Решением в данном случае будет заключение выражения в вызов функции, которая нам известна и заранее объявлена.

function constExpression(x) {
 return x;
}

Итак, в нашем CSS-блоке мы напишем следующее:

#myDiv {
 border: 10px solid Red;
 width:  expression(constExpression(ieBox ? "100px" : "80px"));
}

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

Во-первых, мы сперва должны подключить библиотеку cssexpr.js (о ней речь чуть ниже) и только потом вызывать нашу функцию constExpression.

<script type="text/javascript" src="cssexpr.js"></script>

После этого можно использовать constExpression в любом задаваемом блоке стилей (<style>), или любом подключаемом файле стилей (<link>), или при использовании директивы @import. Следует заметить, что атрибут style у тегов для ускорения работы не проверяется.

Реализация

Идея заключается в том, чтобы перебрать все объявленные таблицы стилей, а в них — все правила и их конечные объявления. Для этого мы начнем с массива 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();
  });
}