4. Производительность CSS
• Сложность страниц увеличивается
– Более красочный дизайн
– Более сложная логика
– Больше объем информации
• CSS-анимация вытесняет JavaScript
– Rollover-эффекты
– Фиксированное расположение блоков
– Выпадающие меню и др.
webo.in 4 / 19
5. CSS-выражения
• Работают только для IE
• Позволяют внедрить JavaScript в CSS
• Существенно замедляют работу
• Вычисляются постоянно
• Пример:
#myDiv {
position: absolute;
left: expression((document.body.offsetWidth > 110 ?
document.body.offsetWidth–110 : 110) + "px");
top: expression(document.body.offsetHeight-110 + "px");
}
webo.in 5 / 19
6. Устраняем CSS-выражения
• Читаем текущее значение
– Через currentStyle
• Вычисляем значение
– Через само CSS-выражение
• Заменяем значение выражения
– Через runtimeStyle на статическое
значение
webo.in 6 / 19
8. Спецификация CSS
• id должен быть уникальным
• Можно использовать только один раз
• class предполагает множественное
использование
• Для повторяющихся на странице
элементов
webo.in 8 / 19
9. Использование в стилях
• #id быстрее, чем node#id
• .class быстрее, чем node.class
• node .class быстрее, чем
node node2.class
• .class в IE быстрее, чем #id
webo.in 9 / 19
11. Время на инициализацию
• При загрузке страницы создается
новый документ
• И при создании любого frame/iframe
• Это ресурсоемкая операция
– 50-200 мс
• Не зависит от размера документа
– Создается одно и то же окружение
webo.in 11 / 19
12. Размер DOM-дерева
• Время на создание дерева линейно
зависит от размера
– 20-50 мс на 1000 узлов
• Семантическое дерево строится
дольше
– На 15-20%
• Основные задержки связаны с
размером
webo.in 12 / 19
13. Скорость выбора элемента по id
• Зависит от размера DOM-дерева
• Зависит от числа элементов с id
• Используем id по минимуму
• Если не требуется обращаться к
элементу из JavaScript, то
используем class
webo.in 13 / 19
15. Reflow
• Производится при загрузке документа
• Либо при обновлении элемента
• Либо при вычислении его размеров
• Либо при вычислении его координат
• Проходит всех родителей элемента,
породившего reflow
webo.in 15 / 19
16. offsetHeight и display:none
• offsetHeight
– Позволяет узнать, отображается ли
элемент на странице
– Очень ресурсоемок
• display:none
– Требует специального задания через стили
– Быстрее на 2 порядка, чем offsetHeight
webo.in 16 / 19
17. Стили или классы?
• Стили
– Назначаются для одного элемента
– Позволяют быстро менять отображение
– Приводят к задержкам при отрисовке
• Классы
– Позволяет назначить сразу группу стилей
– Легко масштабируются
– Назначаются в отложенном режиме
webo.in 17 / 19
18. Два слова о таблицах
• Таблицы – только для табличных
данных
• IE не отображает таблицу, пока не
загрузит полностью
• Фиксированная ширина столбцов
– Ускоряет отрисовку (все в один проход)
– Назначается через <col>
webo.in 18 / 19
