Опубликован: 16.06.2010 | Доступ: свободный | Студентов: 2352 / 93 | Оценка: 4.39 / 4.00 | Длительность: 17:32:00
ISBN: 978-5-9963-0253-6
Лекция 7:

Технологии будущего

6.5. API для CSS-селекторов в браузерах

Данный раздел написан под впечатлением от статьи DOM selectors API in Firefox 3.5 (http://hacks.mozilla.org/2009/06/dom-selectors-api/) Джон Ресиг (автора jQuery и евангелиста веб-стандартов в Mozilla), в которой освещается текущая поддержка браузерами стандартов в этом направлении и некоторые вопросы производительности.

Предварительная версия документа API для селекторов (http://dev.w3.org/2006/webapi/selectors-api/), опубликованная консорциумом W3C, представляет собой относительно новый взгляд для JavaScript-разработчиков на то, как можно выбирать DOM-элементы на страницы при помощи CSS-селекторов. В одном этом документе собраны все тонкости такого сложного процесса, как поиск, выборка элементов из DOM-дерева и представление результата, доступного по упорядоченному интерфейсу.

Несмотря на все недавние войны по поводу интеграции стандартов в браузеры, этот является одним из наиболее поддерживаемых: его можно использовать прямо сегодня в браузерах Internet ExpLorer 8, Chrome и Safari, а также в Firefox 3.5 и Opera 10.

6.5.1. Используем querySelectorAll

API для селекторов предоставляет два метода для всех DOM-доку-ментов, элементов и фрагментов (удивительно удобно, хотя два — это, может быть, немного перебор, но иначе получение уникальных элементов на странице каждый раз выливалось бы в дополнительный JavaScript-код): querySelector и querySelectorAll. Оба метода практически идентичны: оба принимают CSS-селектор и возвращают DOM-элементы (за исключением того, что querySelector возвращает только первый найденный элемент).

Например, давайте рассмотрим следующий участок HTML-кода:

<div id="id" class="class">
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</div>

Мы можем использовать querySelectorAll, чтобы сделать красным фон всех параграфов внутри div с идентификатором id.

var p = document.querySelectorAll("#id p");
for ( var i = 0; i < p.length; i++ ) {
p[i].style.backgroundColor = "red";
}

А также мы можем найти самый первый параграф этого div, который является его прямым потомком и у которого задан класс class. Ему мы присвоим класс first.

document.querySelector("div.class > p:first-child")
.className = "first";

В повседневной жизни описанные процедуры могут быть весьма запутанными в связи с большим объемом JavaScript-/DOM-кода, приводя к многострочным записям и множеству выборок для достижения какой-либо цели. Сразу стоит отметить, что хотя производительность CSS-селекторов уже интегрирована в браузеры, но ее быстродействие (особенно для ряда сложных случаев CSS3-спецификации) может быть весьма низкой.

Для преодоления этой проблемы необходимо использовать кэширующие техники, которые реализованы, например, в YASS (http://yass.webo.in/).

Хотя внешне применение методов API для селекторов весьма просто (каждый принимает только один аргумент на вход), проблемы наступают при выборе подходящей спецификации CSS-селекторов. API для селекторов привязано (и это на самом деле очень хорошо: представьте ситуацию, что браузер в CSS-коде понимал бы один набор селекторов, а при использовании JavaScript предоставлял бы уже совершенно другой доступный набор) к естественному движку CSS-селекторов в браузере, который нужен для применения стилей для конкретных элементов. Для большинства браузеров (Firefox, Safari, Chrome и Opera) это означает, что у вас есть доступ к полной гамме CSS3-селекторов. В то же время Internet Explorer 8 обеспечивает более ограниченный функционал и поддерживает только CSS2-селекторы (работать с которыми до сих можно только с трудом в силу отсутствия их полноценной поддержки в IE 6/7).

Итак, самой большой проблемой для новых пользователей API для селекторов является выбор корректной CSS-спецификации для использования. Особенно это актуально для большинства разработчиков, который пишут кроссбраузерный код и поэтому ориентируются на CSS1-набор, работающий во всех браузерах.

Изучение спецификаций CSS2- (http://www.w3.org/TR/CSS2/selector.html) и CSS3-селекторов (http://www.w3.org/TR/css3-selectors/) будет отличным шагом в увеличении своего багажа знаний.

6.5.2. Суровая реальность

Наиболее часто встречающийся случай применения API для CSS-се-лекторов — это использование его не напрямую, а при помощи разнообразных сторонних библиотек, которые также обеспечивают функциональность CSS-селекторов для DOM. Сегодня основная проблема внедрения применения API для селекторов заключается в том, что они не поддерживаются во всех браузерах, для которых ведется разработка (в частности, это IE 6, IE 7 и Firefox 3). Поэтому пока эти браузеры еще не вышли из обращения, нам будут требоваться некоторые промежуточные утилиты для восстановления недостающей функциональности CSS-селекторов для DOM.

Однако, к счастью, на данный момент таких библиотек — огромное число, и все они поддерживают интерфейс выбора элементов, совместимый с API для селекторов API (на самом деле последнее возникло как раз из рассмотрения текущей ситуации с выбором элементов и предложением интеграции в браузеры некоторой часто требуемой функциональности). В дополнение к этому существует некоторое количество фреймворков, которые уже переключаются на API для селекторов при наличии его в браузере (поэтому вы можете совершенно спокойно использовать их и не думать о применении каких-либо более эффективных инструментов для ускорения клиентской части вашего сайта,). Это означает, что вы можете работать с CSS-селекторами прямо сегодня и получить все возможные преимущества от их повышенного быстродействия в некоторых браузерах за счет API для селекторов, и это обойдется вам совершенно бесплатно.

Некоторые из существующих фреймворков, использующих по возможности API для селекторов:

Стоит также подчеркнуть, что применение нового API влечет значительный выигрыш в производительности (по сравнению с обычными методами выбора элементов из DOM при помощи JavaScript). Вы сможете самостоятельно убедиться в этом, просто судя по улучшению ситуации в JavaScript-библиотеках, которые начали внедрять новое API для селекторов.

Согласно уже проведенным тестам результаты получаются примерно следующими:

Прирост в производительности после внедрения API для селекторов, источник: hacks.mozilla.org

Рис. 6.3. Прирост в производительности после внедрения API для селекторов, источник: hacks.mozilla.org

Невооруженным взглядом виден прирост в производительности после внедрения использования нового API для селекторов — то же самое произойдет с вашими веб-приложениями, применяющими указанные фреймворки, в современных браузерах.

6.5.3. Тестовый набор

Чтобы сравнить определение спецификации API для селекторов (http://dev.w3.org/2006/webapi/seLectors-api/) с фактической реализацией, было создано специальное тестовое окружение (автор — Джон Ресиг из MoziLLa). Это тестовое окружение может быть в том числе использовано для проверки основных браузеров на уровень соответствия стандартам.

Текущие результаты для браузеров, которые поддерживают это API, следующие:

  • Firefox 3.5: 99,3%
  • Safari 4: 99,3%
  • Chrome 2: 99,3%
  • Opera 10b1: 97,5%
  • Internet Explorer 8: 47,4%

Internet Explorer 8, как уже было упомянуто ранее, не реализует логику CSS3-селекторов (наверное, в силу того, что спецификация еще не утверждена w3.org), поэтому проваливает большую часть тестов.

По всей видимости, API для селекторов должно обеспечить простой и быстрый путь для выборки DOM-элементов на странице. Это действительно здорово, что все JavaScript-библиотеки используют тот же самый синтаксис и обеспечивают ту же функциональность. Стоит постараться разобраться в этом сейчас и начать применять этот API.

Ольга Артёмова
Ольга Артёмова

Доброго времени суток!

Прошла курс, но почему-то диплом получить не могу, хотя курс значится завершенным, хотя обязательные два модуля пройдены. Как решить эту проблему?

Сертификация: оптимизация и продвижение web-сайтов.

Наталья Алмаева
Наталья Алмаева
Россия
Вадим Барков
Вадим Барков
Украина, Киев