Download to read offline
633942
- 1. Разгони свой сайт Лекция 6: Оптимизация CSS Мациевский Николай webo.in 1 / 19
- 2. Содержание • ОптимизируемCSS expressions • id или class • Семантика и DOM-дерево • Reflow в документе webo.in 2 / 19
- 3. Оптимизируем CSS expressions webo.in 3 / 19
- 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
- 7. id или class webo.in 7 / 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
- 10. Семантика и DOM-дерево webo.in 10 / 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
- 14. Отрисовка страницы (reflow) webo.in 14 / 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
- 19. В следующей лекции «Ненавязчивый» JavaScript • «Отложенная» загрузка • «Ненавязчивый» JavaScript • «Ненавязчивая» реклама • «Ненавязчивые» счетчики webo.in 19 / 19