API для DOM-селекторов в Firefox 3.5
Примечание: ниже расположен перевод заметки DOM selectors API in Firefox 3.5 с John Resig (автора jQuery равным образом евангелиста веб-стандартов в течение Mozilla), в которой освещается текущая помощь браузерами стандартов в этом направлении равно некоторые вопросы в плане производительности. Мои комментарии кроме курсивом.
Предварительная разновидность документа API для селекторов, опубликованная консорциумом W3C представляет собой относительно последний взгляд для JavaScript-разработчиков, только можно выбирать DOM-элементы для страницы при помощи CSS-селекторов. В одном этом документе собраны безвыездно тонкости такого сложного процесса, на правах поиск, выборка элементов с DOM-дерева и изображение результата, доступного по упорядоченному интерфейсу.
Несмотря для все недавние войны сообразно поводу интеграции стандартов в течение браузеры, этот является одним с наиболее поддерживаемых: его не грех использовать прямо сегодня на браузерах Internet Explorer 8, Chrome да Safari, а также в течение Firefox 3.5 также Opera 10.
Используем querySelectorAll
API ради селекторов предоставляет два порядок для всех DOM-документов, элементов да фрагментов (удивительно удобно, для самом деле, даже двое — это немного перебор, а иначе получение уникальных элементов в странице каждый раз выливалось желание в дополнительный JavaScript-код): querySelector равным образом querySelectorAll. Оба способ практически идентичны: оба принимают CSS-селектор равным образом возвращают DOM-элементы (кроме того что querySelector возвращает а первый найденный элемент).
Например, давайте рассмотрим нижеследующий участок HTML-кода:
<div id="id" class="class">
<p>First paragraph.</p>
<p>Second paragraph.</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.
Хотя внешне пользоваться методы API для селекторов очень просто (каждый принимает всего один аргумент на вход), проблемы наступают присутствие выборе подходящей спецификации CSS-селекторов. API к селекторов привязано (и это в самом деле очень причинность: представьте ситуацию, что браузер в течение CSS-коде понимал желание один набор селекторов, а около использовании JavaScript предоставлял желание уже совершенно другой дешевый набор) к естественному движку CSS-селекторов в течение браузере, который используется с целью применения стилей для конкретных элементов. На большинства браузеров (Firefox, Safari, Chrome равно Opera) это означает, который у вас есть доступ для полной гамме CSS3-селекторов. В то но время Internet Explorer 8 обеспечивает более глупый функционал и поддерживает единственно CSS2-селекторы (использовать которые вплоть до сих можно только едва в силу отсутствия их полноценной поддержки в течение IE 6/7).
Ида, самой большой проблемой в видах новых пользователей API в интересах селекторов является выбор корректной CSS-спецификации ради использования. Особенно это актуально с целью большинства разработчиков, который пишут кроссбраузерный код также поэтому ориентируются на CSS1-ассортимент, работающий во всех браузерах.
Изучение спецификаций CSS2- также CSS3-селекторов будет отличным медленный в увеличении своего багажа знаний, однако ниже также приведено порядком полезных ссылок для дальнейшего ( иначе параллельного) изучения:
- CSS 3 Selectors Explained
- XML.com: CSS 3 Selectors
- jQuery Selector Reference. (Внимание: здесь и приведены некоторые нестандартные селекторы.)
Суровая реальность
Наиболее зачастую встречающийся случая применения 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 в интересах селекторов — то но самое произойдет с вашими веб-приложениями, использующими указанные ферймворки, в течение современных браузерах.
Тестовый ассортимент
Чтобы сравнить приговор спецификации API для селекторов почти фактической реализацией, было создано специальное тестовое окружение ( виновник — John Resig с Mozilla). Это тестовое окружение вероятно в том числе использовано ради проверки основных браузеров для уровень соответствия стандартам.
Текущие результаты в видах браузеров, которые поддерживают это API следующие:
- Firefox 3.5: 99,3%
- Safari 4: 99,3%
- Chrome 2: 99,3%
- Opera 10b1: 97,5%
- Internet Explorer 8: 58,5%
Internet Explorer 8, в качестве кого уже было упомянуто ранее, никак не реализовывает логику CSS3-селекторов (вследствие того, что спецификация вдобавок не утверждена w3.org), следовательно проваливает большую часть тестов.
П касательно всей видимости, API к селекторов должно обеспечить буржуазный и быстрый путь в видах выборки DOM-элементов в странице. Это всерьез здорово, что все JavaScript-библиотеки используют одинаковый самый синтаксис и обеспечивают ту но функциональность. Стоит постараться ориентироваться в этом сейчас также начать использование этого API.
Читать дальше
- Практический JS: балансировка для стороне клиента
- Развитие веба из 2000 до 2007
- Data:URI CSS Sprites нынешний подход к генерации CSS спрайтов
- Оптимизация изображений, кусок 3: 4 шага ради уменьшения размера файлов
- Оптимизация загрузки страниц для практике
- Эксперимент что живых денег может приходить ускорение загрузки сайта?
- Психология веб-производительности, другими словами когда время равно монета
- Оптимизация параллельных загрузок в угоду кому минимизации издержек