Разгони свой сайт Лекция 6 Оптимизация CSS Мациевский

Разгони свой сайт Лекция 6: Оптимизация CSS Мациевский Николай webo. in 1 / 19

Содержание • • Оптимизируем CSS expressions id или class Семантика и DOM-дерево Reflow в документе webo. in 2 / 19

Оптимизируем CSS expressions webo. in 3 / 19

Производительность CSS • Сложность страниц увеличивается – Более красочный дизайн – Более сложная логика – Больше объем информации • CSS-анимация вытесняет Java. Script – Rollover-эффекты – Фиксированное расположение блоков – Выпадающие меню и др. webo. in 4 / 19

CSS-выражения • Работают только для IE • Позволяют внедрить Java. Script в CSS • Существенно замедляют работу • Вычисляются постоянно • Пример: #my. Div { position: absolute; left: expression((document. body. offset. Width > 110 ? document. body. offset. Width– 110 : 110) + "px"); top: expression(document. body. offset. Height-110 + "px"); } webo. in 5 / 19

Устраняем CSS-выражения • Читаем текущее значение – Через current. Style • Вычисляем значение – Через само CSS-выражение • Заменяем значение выражения – Через runtime. Style на статическое значение webo. in 6 / 19

id или class webo. in 7 / 19

Спецификация CSS • id должен быть уникальным • Можно использовать только один раз • class предполагает множественное использование • Для повторяющихся на странице элементов webo. in 8 / 19

Использование в стилях • #id быстрее, чем node#id • . class быстрее, чем node. class • node. class быстрее, чем node 2. class • . class в IE быстрее, чем #id webo. in 9 / 19

Семантика и DOM-дерево webo. in 10 / 19

Время на инициализацию • При загрузке страницы создается новый документ • И при создании любого frame/iframe • Это ресурсоемкая операция – 50 -200 мс • Не зависит от размера документа – Создается одно и то же окружение webo. in 11 / 19

Размер DOM-дерева • Время на создание дерева линейно зависит от размера – 20 -50 мс на 1000 узлов • Семантическое дерево строится дольше – На 15 -20% • Основные задержки связаны с размером webo. in 12 / 19

Скорость выбора элемента по id • Зависит от размера DOM-дерева • Зависит от числа элементов с id • Используем id по минимуму • Если не требуется обращаться к элементу из Java. Script, то используем class webo. in 13 / 19

Отрисовка страницы (reflow) webo. in 14 / 19

Reflow • • • Производится при загрузке документа Либо при обновлении элемента Либо при вычислении его размеров Либо при вычислении его координат Проходит всех родителей элемента, породившего reflow webo. in 15 / 19

offset. Height и display: none • offset. Height – Позволяет узнать, отображается ли элемент на странице – Очень ресурсоемок • display: none – Требует специального задания через стили – Быстрее на 2 порядка, чем offset. Height webo. in 16 / 19

Стили классы? • Стили – Назначаются для одного элемента – Позволяют быстро менять отображение – Приводят к задержкам при отрисовке • Классы – Позволяет назначить сразу группу стилей – Легко масштабируются – Назначаются в отложенном режиме webo. in 17 / 19

Два слова о таблицах • Таблицы – только для табличных данных • IE не отображает таблицу, пока не загрузит полностью • Фиксированная ширина столбцов – Ускоряет отрисовку (все в один проход) – Назначается через webo. in 18 / 19

В следующей лекции «Ненавязчивый» Java. Script • • «Отложенная» загрузка «Ненавязчивый» Java. Script «Ненавязчивая» реклама «Ненавязчивые» счетчики webo. in 19 / 19