Форумы портала PHP.SU » » Хранилище функций на JavaScript » Simple CSS Query

Страниц (1): [1]
 

1. Саныч - 09 Января, 2013 - 23:03:01 - перейти к сообщению
Сегодня ночью закончил написание своего лесапеда типа jQuery. Как и обещал, первым делом выкладываю сюда. Прошу посмотреть, оценить, раскритиковать, дать советы/пожелания. Вобщем все как мы любим Улыбка Убил на написание сего 20 дней, с перерывом в два дня на НГ.

В начале несколько слов о том, что это вобще такое и зачем я это писал. Ну сразу скажу, что библиотека по типу всем известного и любимого jQuery. Но! Во-первых она в 8 раз меньше jQ, по скорости работы примерно в 2 раза быстрее (пока это еще не совсем так, но все же быстрее jQ).
Зачем я ее писал? Давно была задумка написать свою библиотечку, с самыми используемыми мною функциями. Ведь каждый раз грузить 100кБ как-то не интересно, учитывая, что многое из этого не используется. Ну и конечно практика, она никогда не будет лишней. Писалась она по принципу "ничего лишнего", все самое необходимое и чаще всего используемое.

Итак, что она умеет, как с ней работать.
Работаем по аналогии с jQ:
CODE (javascript):
скопировать код в буфер обмена
  1. // jQuery
  2. $('selector').method();
  3. jQuery('selector').method();
  4. // SCQ
  5. $$('selector').method();
  6. SCQ('selector').method();
Ничего лучше $$ я придумать не смог Улыбка
В качестве селектора - строка CSS3, можно передать и DOM элемент, и набор элементов, и работать уже с ними. Так же можно передать ф-цию, она будет вызвана по завершению построения DOM. Тут все по аналогии с jQ.
Работа с DOM, методы: children, parent, parents, find, next, nextAll, prev, prevAll, el. Вобщем тоже все по аналогии с jQ, также можно передать селектор и отфильтровать элементы.
Метод each применяет переданную функцию к каждому элементу объекта.
Для работы с css есть метод addCSS.
Для классов: addClass, removeClass, hasClass, toggleClass.
Анимация и эффекты: show, hide, slideUp, slideDown и animate.
animate должна работать со всеми числовыми свойствами, но тестировалась только для: width, height, opacity, top, left, right, bottom.
Навешивание событий - метод event(). Естественно есть поддержка "живых" событий. Для click есть отдельная обертка, т.к. его я использую чаще всего.
Ну и естественно $$.ajax() Улыбка
Прикрепил файлик с описанием всех доступных методов, их параметрами, документация вобщем.

Теперь несколько слов о поддержке браузерами.
Проверялось: Opera 12, FireFox 17, Chrome 23, IE9, Yandex 1.1, Safari 4 и IE8, но с ограничением в виде потдержки только CSS2.1 селекторов. Т.е. в ослике 8 при попытке выбрать элементы по псевдоклассу, будет возврщен "пустой" объект.

О скорости.
Сделал страничку с грaфиками, сравнивающими скорость работы моей либы с jQ - http://94[dot]240[dot]175[dot]28:2013/ Для тестов была украдена главная страница этого форума Улыбка
В двух словах: при выборе всех элементов на странице, либо выборе по id, классу, либо тегу скорость примерно на 10 - 15% выше jQ. Видимо это из-за использования множества обверток в jQ. На более сложных селекторах "заторможенность" jQ становится еще более заметна. Селекторы примерно такие:
CODE (css):
скопировать код в буфер обмена
  1. #ipbwrapper .row4 a
  2. a[title][href*=php]
  3. table tr:nth-child(2n) > :not(td)
На последнем селекторе моя библиотека в IE8 ествественно ничего не "нашла". jQ же здесь работает. Но как работает, это нечто. Выбор элементов в jQ по последнему запросу, при цикле в 5000 занимает более 70 секунд! А?! Т.е. скорость просто черепашья...

Что касается навешивания событий (в данном случае обычных, не "живых"), то я был крайне удивлен Не понял Мой код обгоняет jQ в среднем в 10 раз! Аж стало интересно разковырять jQ и посмотреть в подробностях, что он там такое делает, что так тупит.
При навешивании "живых" событий я так же впереди jQ, но на столько шокирован не был.
Единственное, вылез один мой баг. При навешивании "живого" события в Safari, оно отрабатывает за 10+ секунд и здорово подвешивает браузер А?! Вобщем буду это исправлять, а пока результаты из Safari в данном тесте не участвовали.

Что касается CSS, то тут вобщем все на равне с jQ, нет ничего интересного. График не делал по данному тесту.

А вот с работой с классами просто беда. При количестве элементов в 10 - 20 штук, все нормально. Но как только в наборе больше 100 элементов, все начинает жутко тормозить. Вобщем эта часть будет переделана и исправлена.

Скорость анимации не тестировал, ну в принципе тоже можно сделать тесты именно на вызов и отрисовку первого "кадра".

Вобщем смотрите графики, они нагляднее.

Кстате по результатам тестов сделал вывод, что самый быстрый браузер в плане js - это опера, ну, а самый тугой - ослик 8.

Файлы прикрепил. Не смог прикрепить несколько, поэтому запаковал их в архив.

з.ы. извините за длинный текст.
2. IllusionMH - 20 Мая, 2013 - 01:43:05 - перейти к сообщению
Саныч, спасибо за предоставленную либу. Посмотрю обязательно.

Возникла пара вопросов:
1) А с какой версией jQ происходило сравнение?
(вероятно на графиках я это увижу, но не могу подгрузить страницу в данный момент).

2) модульная сборка jQ + сжатие, может значительно уменьшить размер сего творения.
Не проверялась ли разница в размерах при образении jQ до аналогичного функционала?

Саныч пишет:
Кстате по результатам тестов сделал вывод, что самый быстрый браузер в плане js - это опера, ну, а самый тугой - ослик 8.

Скажем так, у оперы самый быстрый механизм реализующий выборку элементов по селекторам, но проигрывает в производительности V8 в других областях.
Надеюсь этот кусок V8 будет существенно переработан ребятами из Opera
(На тяжелых вычислениях(я понимаю, что это не тот язык, но не хотелось как все на Дэлфи, ибо скучно) он проигрывал местами раза в 2)
3. Саныч - 20 Мая, 2013 - 10:01:14 - перейти к сообщению
IllusionMH пишет:
Саныч, спасибо за предоставленную либу. Посмотрю обязательно.
Да, пожалуйста! Вобще удивлен, как вы забрели в этот топик... 5 месяцев ниодного ответа и тут бах, приходит уведомление на мыло)

IllusionMH пишет:
1) А с какой версией jQ происходило сравнение?
(вероятно на графиках я это увижу, но не могу подгрузить страницу в данный момент).
Сравнение происходило с версией 1.8.3.
С тех пор изменился IP, сейчас графики доступны по http://94[dot]240[dot]178[dot]128:2013 .

IllusionMH пишет:
2) модульная сборка jQ + сжатие, может значительно уменьшить размер сего творения.
Не проверялась ли разница в размерах при образении jQ до аналогичного функционала?
Нет, не проверялось. jQ при написании даже не смотрел, только когда было сильное расхождение в скорости, то ковырялся jQ, и то с целью только узнать как реализовано это у них.

Собирался доделать/исправить, но как всегда у меня, мне не хватило времени. В итоге с нового года так и ничего и не делал, может летом займусь все же...
4. IllusionMH - 20 Мая, 2013 - 11:18:04 - перейти к сообщению
Саныч пишет:
Вобще удивлен, как вы забрели в этот топик... 5 месяцев ниодного ответа и тут бах, приходит уведомление на мыло)

Он у меня вверху темы был как непрочитанный.
С телефона не заметил дату поста.
Действительно, замечания по поводу размера и сравнения с 1.9/2.0 некорректны в виду их более позднего выхода.

Саныч пишет:
Нет, не проверялось. jQ при написании даже не смотрел

Код jQ смотреть необязательно. Как собрать только нужные модули и сжать описано в официальном репозитории
https://github[dot]com/jquery/jquery

Если свободное время найдется, нужно будет попробовать сравнить с недавней 2.0. Там как раз убрали костыли для древних браузеров.
5. nerv - 20 Мая, 2013 - 12:29:57 - перейти к сообщению
Саныч пишет:
Сегодня ночью закончил написание своего лесапеда типа jQuery

все уже написано и отдебажено
http://zeptojs[dot]com/
https://github[dot]com/madrobby/zepto

В дополнение: использую ее в проекте.
6. Саныч - 20 Мая, 2013 - 14:52:09 - перейти к сообщению
IllusionMH пишет:
Если свободное время найдется, нужно будет попробовать сравнить с недавней 2.0. Там как раз убрали костыли для древних браузеров.
Думаю особого смысла нет сравнивать. Тормоза jQ были связаны именно с поддержкой старых версий, в частности осла, ну и других браузеров в том числе. А в 2.0 они все это порезали, ну по крайней мере так заявлено, сам 2.0 не скачивал и не смотрел еще...
Просто думаю, что по скорости будут равны, либо jQ даже быстрее. Все же уровень писавших тоже нужно учитывать...
(Добавление)
nerv пишет:
все уже написано и отдебажено
Да я ж не спорю, даже уверен, что такое уже есть, и даже не в единичном количестве. Вся суть была сделать что-то свое, родное Улыбка
7. nerv - 20 Мая, 2013 - 15:06:50 - перейти к сообщению
Саныч пишет:
А в 2.0 они все это порезали

и при этом она не похудела...

Саныч пишет:
Скорость анимации не тестировал, ну в принципе тоже можно сделать тесты именно на вызов и отрисовку первого "кадра".

http://habrahabr[dot]ru/post/114358/
8. IllusionMH - 20 Мая, 2013 - 15:53:10 - перейти к сообщению
nerv, примерно на 11% похудела по сравнению с 1.8.3/1.9.1 (minified). Не состоять же ей на 50% из костылей Радость
9. nerv - 04 Августа, 2013 - 11:57:42 - перейти к сообщению
Саныч пишет:
Описание: Как jQuery, только меньше и быстрее

помимо зепто, о кот. я писал выше, есть еще jqLite, которая работает внутри ангуляра, если не подключена жуквери

 

Powered by ExBB FM 1.0 RC1