АртемКо

IE8 и onclick=return false

admin — Thu, 02 Feb 2012 05:57:31 +0000

Замечена проблема с ссылками в IE версий ниже 9 - он игнорирует "return false" при обработке onclick.

Т.е. типовой обход перехода по ссылке

Do something

не работает.

Проблема решается простым хаком:

Do something

Обзор игры AMY

admin — Sat, 28 Jan 2012 16:55:42 +0000

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

В руки попала демонстрационная версия совсем свежей игры в жанре survival horror - "AMY".

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

Попробую вкратце описать сюжет и свои впечатления геймплея.

Игра начинается с продолжительной вставки, где, в случае с XBOX 360, мы наблюдаем первый фэйл. Она тормозит. Не совсем, чтобы совсем тормозит, но лаги наблюдаются весьма ощутимые. Берем себя в руки и продолжаем смотреть вступительную сцену...

Итак, сюжет игры разворачивается в недалеком будущем
Канун Рождества.

В купе междугороднего экспресса, женщина по имени Лана сопровождает из одного медицинского учреждения в другое, маленькую унылую девочку, инвалида второй группы, Эми.

Чернокожий контролер, с лицом отсидевшего полжизни убийцы, подбадривает Эми байками про краснощекого старика с мешком подарков, который вот-вот выйдет на улицы сеять добро.

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

Очухавшись от пережитой катастрофы, Лана, нигде не может найти порученного в сопровождение ребенка. И, как бы ей этого ни не хотелось, отправляется на поиски пропавшей девочки.

Здесь, собственно, и начинается сама игра.

Атмосфера хоррора выдержана очень натурально. Когда Лана, идущая по разбитому вхлам вагону поезда начинает звать: "Эми, детка, где ты прячешься?", и, при этом безэмоционально проходит мимо согнувшегося в углу тамбура в луже крови проводника - невольно бросает в дрожь. Хочется сказать ей - посмотри вокруг, дура, вылетела твоя Эми через стекло, и лежит уже где-то, размазанная об стену... Но, похоже у дамы сильнейший шок и контузия.

Сразу же огорчила жесточайшая линейность сюжета. Не сделав чего-то в одной локации, вы не можете перейти к следующей. Например, не подобрав в вагоне арматурину, Лана не может сойти с поезда. Дескать, небезопасно нынче девушке по вокзалу без железяки ходить... Пристают всякие...

Выйдя на станцию, встречаем первых зомби - обитателей местных закоулков. Весьма недружелюбных. Но, увы, никакого эффекта неожиданности и легкой паники, свойственного лучшим играм этого жанра. Пара ударов палкой - и зомби рассыпается, аки жидкий терминатор Т-1000. Смерть зомби - это еще одно разочарование от игры. Персонажи очень детально прорисованы - одежда, движения, ссадины и царапины, и при таком уровне детализации можно было ожидать столь же продвинутой анимации брутальных сцен - фонтанов крови, расколотых черепов, внутренностей на полу, оторванных конечностей, дергающихся в конвульсиях. Увы, ничего такого. Фэйл.

Еще один минус игры, вероятно, обусловленный линейностью, практически полное безразличие окружения к действиям героини. Можно подойти к стене и начать молотить по ней палкой. Никаких следов. Ни вмятин, ни царапин, да кого там - даже никаких звуков. Уж что-что, а звук удара палки о стену в такой ситуации можно было бы и добавить. Другая ситуация - подходим к ящикам, преграждающим наш путь. Хлипенькие такие ящички, деревянные. Опять пускаем в ход палку. В любом слэшере - мы бы с одного удара разнесли препятствие в щепки... Но нет, это же не тупой слэшер, тут думать надо, и палка свободно проходит сквозь ящики, а они стоят не шелохнувшись. Физика на нуле. Фэйл.

Вскоре встречаем очередного зомби и начинаем как обычно хреначить его арматурой. А он не мочится. Оказывается это вполне себе доброжелательный NPC. Просто у него лицо такое... В общем, какой-то гастарбайтер, кэб-драйвер. Как постоянный обитатель этого вокзала, он знакомит Лану с некоторыми местными лайфхаками, как например, что многие двери тут открываются по запаху ДНК...

Чтобы пройти очередную локацию, нам предлагается решить простенькие логические мини-игры, под видом взлома компьютера... Глупость бредовая, на мой взгляд. Для игры с рейтингом R, можно было придумать что-то поинтереснее задачек для семилетних детей. Фэйл.

Пройдя очередную локацию игры, в одном из туалетов обнаруживаем ту самую Эми, на поиски которой мы и пошли.

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

Эми оказывается очень полезным компаньоном - она беспрекословно слушается взрослую тетю, может пролезать в узкие дыры в стенах и нажимать всякие кнопки. А еще она за считанные секунды взламывает защиту компьютерных систем федерального уровня. Короче, не ребенок, а чудо. Хватаем ее за руку и тащим за собой, на встречу ужасам приключений.

И помним, что девочку нужно доставить до места назначения.

Хоть тресни!

Резюмируя, скажу, что покупать эту игру больше чем за 5 баксов я бы не стал. Но если бы купил, поставил бы на одну полку с Silent Hill и Resident Evil. Ибо есть в этой игре нечто... пугающе жуткое...

Тест производительности KittyJS 0.7

admin — Mon, 23 Jan 2012 10:00:36 +0000

Оценка производительности KittyJS 0.7 и сравнение с производительностью jQuery 1.7.1 на аналогичных выборках.

Оценивалась суммарное время, необходимое для каждого фреймворка, для выполнения 10 000 операций получения элементов.
Цифра на графиках - время в миллисекундах.
Зеленый график - KittyJS, синий график - jQuery.
Чем ниже график, тем лучше значение.

Google Chrome 16

Firefox

Internet Explorer 9

Opera 11:

Тесты:

Get By Id - получение элемента по id / $K('#id')
Selector - выборка со сложным условием / $K('tag1 tag2.class tag2.class[attr=value]:state')
Parents - выборка из родителей выборки / $K(slection1).parents(selection2)
Children - выборка из дочерних элементов выборки / $K(selection1).children(selection2)
Siblings - выборка из соседних элементов выборки / $K(selection1).siblings(selection2)

http://www.artem-ko.ru/kittyjs/speedtest/

Как видим, выборки по сложным селекторам и выборки дочерних элементов набора заметно опережают по скорости аналогичные операции в jQuery.

С другой стороны, операции поиска соседних и родительских элементов в большинстве браузеров заметно проседают.

Есть еще к чему стремиться.

KittyJS 0.3

admin — Mon, 16 Jan 2012 20:30:51 +0000

Kitty JS обновился до версии 0.3

Увы, подход описанный в предыдущем посте оказался в неверным, т.к. не позволял делать полноценные выборки по родительским нодам. Например, невозможно было реализовать селектор :last или :even в запросе типа ".divClass:last input".

Пришлось вернуться к исходному перебору нод, начиная с родительских.

Много надежд возлагал на метод querySelectorAll, однако на практике оказалось, что использование этого метода очень сильно просаживает производительность. Спасает очень быстрый метод getElementsByTagName, в хроме показавший результаты практически вдвое быстрее чем querySelectorAll.

Причину такой разницы в скорости работы описали здесь.

Что реализовано в версии 0.3:

методы
$K(selector).style(name): string
$K(selector).style(name, value)
$K(selector).attr(name): string
$K(selector).attr(name, value)

селекторы
: disabled
: checked
: empty
: first
: last
: even
: odd
: eq(n)
: gt(n)
: gte(n)
: lt(n)
: lte(n)

Тесты производительности:
10 тысяч операций поиска элементов по id, тэгу, классу, атрибутам.
Chrome 16.
Kitty: 1050 мс
jQuery: 1170 мс

FireFox 7.0.1
Kitty: 1790 мс
jQuery: 1770 мс

IE9
Kitty: 17.2 c
jQuery: 26 c

Результаты IE меня слегка шокировали.
Я, конечно, ожидал результатов несколько ниже чем в хроме или ФФ, но никак не в 20 раз.

@TODO (0.4):

селекторы выборки по подстроке значения атрибута (^=, |=, $=, ~=);
базовые методы для работы с нодами и html элементами (find, children, parents, siblings, hasClass, addClass, delClass, val);
события, обработчики событий;
расширения.

Скачать, как и прежде, можно тут: http://www.phpfw.ru/kittyjs/kitty.zip

Hello, Kitty!

admin — Sun, 04 Dec 2011 12:54:03 +0000

В целях быстрой прокачки скиллов клиент-сайд программирования начал писать собственный JavaScript фреймворк... с блекждеком и... ну, вы поняли...

Встречайте, Kitty.

При разработке, в основном, ориентировался на jQuery, как самый распространенный, и, пожалуй, самый простой фреймворк.
Поэтому в плане интерфейса Kitty будет похож на jQuery, а где-то будет повторять его.

Часть 1: поисковый движок.

Первой целью, естественно, было создание поискового движка, позволяющего быстро выбрать все элементы страницы по заданной строке в CSS-совместимом формате (селекторы):

TR#id.class[attr=value]:flag TR#id.class[attr="value"]:flag, TR#id.class[attr='value']:flag

Например:
DIV#myDiv td.evenRow input[type=radio]:checked, DIV#myDiv2 input[type=checkbox]
выборка по этому сложному селектору должна вернуть массив элементов, состоящих из выделенных радиобаттонов, которые находятся в ячейках таблицы, имеющих класс evenRow и находящихся внутри дива с id=myDiv, а так же из чекбоксов, находящихся внутри дива с id=myDiv2.

Для начала строка приводится к правильному виду - удаляются лишние пробелы.

// множество пробелов заменяем одним
selectionStr = selectionStr.replace(/\s+/g," ");

// trim - удаляем пробелы в начале и в конце строки
selectionStr = selectionStr.replace(/^\s|\s$/g,"");

// удаляем пробелы вокруг запятых и лишние запятые
selectionStr = selectionStr.replace(/\s\,/g,",").replace(/\,\s/g,",").replace(/^\,+|\,+$/g,"");

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

Более сложная задача - выборка элементов с учетом иерархии DOM.
Для парсинга отдельных частей сложных селекторов было составлено вот такое регулярное выражение:

/^([*A-Za-z]+)?(\#[A-Za-z\_\-0-9]+)?(\.[A-Za-z\_\-0-9]+)?(\[([A-Za-z\_\-0-9]+)\=["']?([A-Za-z\_\-0-9]+)["']?\])?(\:[A-Za-z\_\-0-9]+)?/i

А так же была написана простейшая функция фильтрации набора нод по заданному простому селектору.

Первой идеей было спускаться по выборке сверху вниз:
т.е. в случае селектора DIV#myDiv td.evenRow input[type=radio]:checked, сначала получаем все ноды страницы, отыскиваем среди них DIV c id=myDiv, получаем все дочерние ноды, ищем среди них td c классом evenRow, получаем их дочерние элементы и среди них выбираем искомые радиобаттоны.

Реализация в 5 строк кода, однако возникло несколько проблем.

Во первых, одна и та же нода могла быть выбрана несколько раз: например, в случае "div div div", приходилось запоминать в отдельный массив, какая нода уже попала в выборку, а какая - нет.

Во вторых, производительность оказалась очень низкой. Цикл из 10 000 выборок работал более 17 секунд.

Остановился на более сложном, но и более быстром алгоритме "снизу вверх":

Сначала на странице находим все элементы, которые удовлетворяют конечным (например, радиобаттоны).
Затем пробегаемся по ним циклом, и для каждого проверяем удовлетворяет ли цепочка их родителей остальной части селектора. При этом, если родители одной ноды удовлетворяют условиям поиска, то другие найденные ноды, с тем же родителем автоматически считаются искомыми. И наоборот, если родители ноды не удовлетворяют селектору, то ее соседки так же исключаются из результатов.

Костяк поискового движка уложился в 100 строк кода, и совсем немного уступает по скорости движку Sizzle, который используется в jQuery - на 10000 сложных выборок - Kitty уступал в скорости jQuery 150-200 мс. При этом, выигрывал 30-70 мс на простых выборках.

Конечно, функционально поисковый Kitty еще заметно уступает Sizzle: не реализована выборка по специальным селекторам вроде :first, :last, :checked и т.п., нет поддержки дочерних элементов вида "a > b", однако, 90% моих потребностей он уже покрывает.

Подключение и работа:

После подключения доступен объект Kitty и короткий алиас $K для выборки элементов.

Пример: