Оптимизируем 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‑выражений на странице не удается, то нужно помнить, что они могут вычисляться тысячи раз и тем самым повлиять на производительность всей страницы.