Помощник
|
Какие CSS селекторы вы используете |
PRStudio
|
Сообщение
#1
|
||
|
|
||
|
|||
cyber_ua |
2.11.2012, 0:04;
Ответить: cyber_ua
Сообщение
#2
|
|
Пишу велосипедный js-фреймворк (для себя), начал, конечно, с селектора. Его решил организовать наподобие jquery-вского $. Написал. Работает, но пока доступны лишь простые конструкции вроде [CSS]body div.class element#id element ...[/CSS] Как часто вы пользуетесь другими CSS селекторами внутри js фреймворков, вроде [type="input"] [lang|="en"] и т.д., т.е. имеет ли смысл возиться еще и с их внедрением? мне кажеться если писать что то на подобие jquery то нужно хотя бы изучить ее. - у них используется document.querySelectorAll и его кроссбраузерная реализация для старых браузеров. - у них элементы кэшируются что бы не было утечек памяти для того что бы это было похоже на фреймворк хоть не много то 2 пункта выше должны быть обязательными (ИМХО). |
|
|
cyber_ua |
2.11.2012, 0:13;
Ответить: cyber_ua
Сообщение
#3
|
|
у них элементы кэшируются что бы не было утечек памяти http://learn.javascript.ru/memory-management - у них используется document.querySelectorAll и его кроссбраузерная реализация для старых браузеров. http://learn.javascript.ru/jquery-search http://learn.javascript.ru/searching-elements-dom http://learn.javascript.ru/getelements-que...ector-internals |
|
|
Arks |
2.11.2012, 1:36;
Ответить: Arks
Сообщение
#4
|
|
С селекторами возиться смысла точно нет, разьве что в браузерах что-то новое появится - свой фреймворк будет гораздо проще поддерживать, чем жать обновления jquery или копаться в последней версии чужого кода для модификации. Или если конкретно jquery-идеи по какой-то причине неудобны.
Есть смысл возиться с тем как эти селекторы взаимодействуют с событиями, DOM-элементами и данными запросответов, но никак не с самим выбором DOM-элементов, он прекрасно реализован в браузерах и jQuery. Да и вообще я не использую css-селекторы для выбора DOM-объектов, только id. Если мне надо выбрать 10 элементов - я заранее знаю что это за элементы и какие у них id, и как ни странно, это работает быстрее, а выбирать что-то непонятное криво сверстанное с классами в разных частях страницы - нафига? Классы нужны для сокращения объема стилей а не для выбора элементов. |
|
|
cyber_ua |
2.11.2012, 2:38;
Ответить: cyber_ua
Сообщение
#5
|
|
С селекторами возиться смысла точно нет, разьве что в браузерах что-то новое появится - свой фреймворк будет гораздо проще поддерживать, чем жать обновления jquery или копаться в последней версии чужого кода для модификации. Или если конкретно jquery-идеи по какой-то причине неудобны. Есть смысл возиться с тем как эти селекторы взаимодействуют с событиями, DOM-элементами и данными запросответов, но никак не с самим выбором DOM-элементов, он прекрасно реализован в браузерах и jQuery. Да и вообще я не использую css-селекторы для выбора DOM-объектов, только id. Если мне надо выбрать 10 элементов - я заранее знаю что это за элементы и какие у них id, и как ни странно, это работает быстрее, а выбирать что-то непонятное криво сверстанное с классами в разных частях страницы - нафига? Классы нужны для сокращения объема стилей а не для выбора элементов. document.querySelectorAll - поддерживается ие8+ , можно особо не заморачиватся о поддержки старых браузеров, понятно что в большинстве случаев работают только с поиском по id || классу но все же иногда он не плохо помогает ( главное события типа клика не вешать по классу на большое кол-во элементов:)) и кстати querySelector быстрей getElementsByClassName http://www.html.by/threads/25995-benchmark...ementam-v-cikle. |
|
|
PRStudio
|
Сообщение
#6
|
|
Сделал небольшой тест, пока мой селектор работает в среднем в 3 раза быстрее jquer-евского и ~2 раза медленнее querySelector (тестировал в chrome, opera), но это было после того, как я начал запросы кэшировать, а до того, отставание от querySelector было в раз 30-50 (на 10000 итераций) :sarcastic:
Но это пока, пока я не вдавался в утечки и не чистил объекты, а также не анализирую запросы на селекторы вроде [attr="val"] и т.п., это наверно заметно снизит скорость работы и приблизит меня к jquery. Вот и вдаюсь в вопрос, а нужны ли эти самые [attr="val"], пользуются ли ими люди? |
|
|
RayOfLight |
4.11.2012, 14:40;
Ответить: RayOfLight
Сообщение
#7
|
|
Arks, n/t
Да и вообще я не использую css-селекторы для выбора DOM-объектов, только id. Если мне надо выбрать 10 элементов - я заранее знаю что это за элементы и какие у них id, и как ни странно, это работает быстрее, а выбирать что-то непонятное криво сверстанное с классами в разных частях страницы - нафига? Классы нужны для сокращения объема стилей а не для выбора элементов. Т.е. типа, 200 новостей на странице такого вида: <div class="news_item" id="news_item_1">...</div> <div class="news_item" id="news_item_2">...</div> <div class="news_item" id="news_item_3">...</div> <div class="news_item" id="news_item_4">...</div> <div class="news_item" id="news_item_5">...</div> ... <div class="news_item" id="news_item_200">...</div> И выборка по ним соответствующая: [JS]$('#news-item_1, #news-item_2, #news-item_3, ..., #news-item_200')[/JS] Может, все же стоит селекторы использовать? PRStudio, Как часто вы пользуетесь другими CSS селекторами внутри js фреймворков, вроде [type="input"] [lang|="en"] и т.д., т.е. имеет ли смысл возиться еще и с их внедрением? Если пишете фреймворк чисто для себя, исходите из своих запросов. Если для общественности, то, думаю, нужно поддерживать самые замудреные селекторы, с атрибутами, :nth-child() и т.д. |
|
|
PRStudio
|
Сообщение
#8
|
|
Переписал раз 3-й. На этот раз добавил поддержку селекторов атрибутов ([attr="value"],[attr|="value"],[attr~="value"],[attr^="value"],[attr*="value"],[attr$="value"]) + селекторы "+,>,~", стандартные селекторы, разделение (,), ну и тройку стандартных псевдо-классов (:odd, :even, :first-child) с возможностью расширения.
Приведу небольшую статистику: Обрабатываем документ: <html> <head> <title>JS Framework</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <input type="submit" value="submt" /> <input type="text" class="text1-text2-text" name="text" value="input with class" /> <a href="lolo_jpg">ss</a> </body> </html> Берем селектор: [JS]body *[type="submit"][value$="mt"], body > div, input[class|="text1"] + a[/JS] Проводим выборку 10000 раз (в 7 Осле): Самопальный селектор: 727 Самопальный селектор (без кэширования уже найденных селекторов): 1702 Jquery: 8588 0_0 Самопальный селектор (Натив) = Jquery (Натив) ~ 420-450 (Это уже в Жопере, 7 Осел не знать querySelectorAll). Честно говоря, не ожидал увидеть такой разбежки. Я вообще не ожидал от jquery подобных цифр. Возможно я просто что-то делаю не так :sarcastic: |
|
|
Arks |
16.11.2012, 22:13;
Ответить: Arks
Сообщение
#9
|
|
И выборка по ним соответствующая: 1 $('#news-item_1, #news-item_2, #news-item_3, ..., #news-item_200') Может, все же стоит селекторы использовать? Для чего их стоит использовать? Я понимаю, "селекторы" это такое модное слово. Но вот реально, для чего? У 200 новостей разом стиль поменять? Текст новостей? Ну вот для чего? Для чего по DOM-элементам разом выборка то нужна? Она быстрее работает чем описанный мной способ с getElementById(jquery в примере это Ваши личные домыслы, я не так использую DOM-элементы) или что? Вот приведите хоть один пример где это действительно нужно. Как люди не могут понять, что javascript для DOM так и остался неизменным с 99 года и используется в совсем других целях. И сам по себе поиск элемента в дереве а-ля XML никогда не будет быстрее чем выбор из хэш-таблицы, из кучи в памяти. Отсюда и огромная разница между getElementById и медленными getElementsByTagName и разными более быстрыми, но все равно аутсайдерскими querySelectorAll. и более того, тот же querySelector тоже всегда проиграет getElementById, просто по факту, по определению. А вот эта самая разница между querySelector для 200 элементов и переборе из 200 getElementById - это разница интрепретации. Но по факту она никогда не используется потому что никогда не нужно выбирать разом 200 элементов из разных частей страницы находящихся непонятно-где в DOM через какие-то мутные критерии поиска(селекторы) |
|
|
RayOfLight |
16.11.2012, 22:27;
Ответить: RayOfLight
Сообщение
#10
|
|
Arks, согласен, двести элементов разом вряд ли где-то будут скрываться. Зато размер скрипта от [JS]$('#news-item_1, #news-item_2, #news-item_3, ..., #news-item_200')[/JS] вырастет в разы, что скажется на скорости загрузки страницы. С учетом все время растущей производительности компьютеров (да и мобильных устройств тоже) разница между O(1) и сложностью поиска в дереве практически стирается. Какой смысл считать песчинки?
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Какие особенности монетизации телеграм каналов? | 8 | metvekot | 2486 | 18.3.2024, 20:43 автор: Rebex |
|
Какие интернет активы вы знаете? | 38 | metvekot | 6977 | 29.2.2024, 11:18 автор: Skyworker |
|
Какие доргены используете в 2023 году? | 5 | metvekot | 2845 | 29.2.2024, 10:35 автор: Skyworker |
|
Какие почтовые сервисы и облака дольше всего не удаляют аккаунт? | 89 | metvekot | 18537 | 9.2.2024, 16:36 автор: metvekot |
|
Разработка/доработка сайтов Wordpress, HTML/CSS/JS Вёрстка, перенос на WP, правки |
9 | malamut | 3459 | 25.1.2024, 14:36 автор: malamut |
Текстовая версия | Сейчас: 19.4.2024, 15:45 |