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

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

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

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

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

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

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

7 id или class webo.in 7 / 19

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

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

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

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

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

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

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

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

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

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

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

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