Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Simple CSS Query

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: Как jQuery, только меньше и быстрее
Саныч
Отправлено: 09 Января, 2013 - 23:03:01
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




Сегодня ночью закончил написание своего лесапеда типа 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.

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

з.ы. извините за длинный текст.
Скачать файл: scq.1.0.rar
Скачан раз: 102

(Отредактировано автором: 09 Января, 2013 - 23:16:43)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
IllusionMH
Отправлено: 20 Мая, 2013 - 01:43:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




Саныч, спасибо за предоставленную либу. Посмотрю обязательно.

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

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

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

Скажем так, у оперы самый быстрый механизм реализующий выборку элементов по селекторам, но проигрывает в производительности V8 в других областях.
Надеюсь этот кусок V8 будет существенно переработан ребятами из Opera
(На тяжелых вычислениях(я понимаю, что это не тот язык, но не хотелось как все на Дэлфи, ибо скучно) он проигрывал местами раза в 2)
 
 Top
Саныч
Отправлено: 20 Мая, 2013 - 10:01:14
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




IllusionMH пишет:
Саныч, спасибо за предоставленную либу. Посмотрю обязательно.
Да, пожалуйста! Вобще удивлен, как вы забрели в этот топик... 5 месяцев ниодного ответа и тут бах, приходит уведомление на мыло)

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

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

Собирался доделать/исправить, но как всегда у меня, мне не хватило времени. В итоге с нового года так и ничего и не делал, может летом займусь все же...

(Отредактировано автором: 20 Мая, 2013 - 10:02:13)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
IllusionMH
Отправлено: 20 Мая, 2013 - 11:18:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




Саныч пишет:
Вобще удивлен, как вы забрели в этот топик... 5 месяцев ниодного ответа и тут бах, приходит уведомление на мыло)

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

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

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

Если свободное время найдется, нужно будет попробовать сравнить с недавней 2.0. Там как раз убрали костыли для древних браузеров.
 
 Top
nerv
Отправлено: 20 Мая, 2013 - 12:29:57
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)




Саныч пишет:
Сегодня ночью закончил написание своего лесапеда типа jQuery

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

В дополнение: использую ее в проекте.

(Отредактировано автором: 20 Мая, 2013 - 12:33:15)



-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
Саныч
Отправлено: 20 Мая, 2013 - 14:52:09
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




IllusionMH пишет:
Если свободное время найдется, нужно будет попробовать сравнить с недавней 2.0. Там как раз убрали костыли для древних браузеров.
Думаю особого смысла нет сравнивать. Тормоза jQ были связаны именно с поддержкой старых версий, в частности осла, ну и других браузеров в том числе. А в 2.0 они все это порезали, ну по крайней мере так заявлено, сам 2.0 не скачивал и не смотрел еще...
Просто думаю, что по скорости будут равны, либо jQ даже быстрее. Все же уровень писавших тоже нужно учитывать...
(Добавление)
nerv пишет:
все уже написано и отдебажено
Да я ж не спорю, даже уверен, что такое уже есть, и даже не в единичном количестве. Вся суть была сделать что-то свое, родное Улыбка

(Отредактировано автором: 20 Мая, 2013 - 14:55:22)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
nerv
Отправлено: 20 Мая, 2013 - 15:06:50
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)




Саныч пишет:
А в 2.0 они все это порезали

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

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

http://habrahabr.ru/post/114358/

(Отредактировано автором: 20 Мая, 2013 - 15:15:34)



-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
IllusionMH
Отправлено: 20 Мая, 2013 - 15:53:10
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




nerv, примерно на 11% похудела по сравнению с 1.8.3/1.9.1 (minified). Не состоять же ей на 50% из костылей Радость
 
 Top
nerv
Отправлено: 04 Августа, 2013 - 11:57:42
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)




Саныч пишет:
Описание: Как jQuery, только меньше и быстрее

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


-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Хранилище функций на JavaScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB