Посты с тэгом «javascript»

  • Для вдохновения

    Покопался тут в своих старых проектах, нашел некоторые демки, которые я делал для разных конференций и проектов. Может, кому пригодится. Сразу скажу: большая часть из них не работает в IE, некоторые глючат во всех остальных браузерах. Все представленные демки — не более чем разминка для решения более сложных задач.

    • Стиралка — водим курсором по картинке, стирая защитный слой (HTML, JS, CSS).
    • Экскаватор — Для конференции РИТ-2008. Полностью программная анимация, использовались принципы инверсной кинематики (Canvas, JS).
    • Инфоскроллер — Реализация инфоскроллера Артема Горбунова на JS: анализирует текущий документ и строит из него упрощенную схему для скроллера. Делался в качестве домашнего задания для технологов Студии Лебедева (я, кстати, был той сволочью, которая их раздавала). Руки не дошли довести его до нормального состояния.
    • Волшебные пузырьки — Демонстрация способа имитации масок не прямоугольной формы (HTML, CSS, JS). Эта демка использовалась разработчиками IE8 для тюнинга производительности.
    • Спрей — Для конференции РИТ-2008. Простенькая анимация цвета и движения объектов вдоль кривой Безье (JS, jTweener).
    • Переливающиеся слова — Для конференции РИТ-2008. Тоже простая анимация: в основном демонстрируется способ у обычного текста выхватить отдельные слова и анимировать их (HTML, CSS, JS). Кстати, повторить это на флэше гораздо сложнее :). Особенно с учетом того, что текст растягивается и можно менять размеры шрифта.
    Метки: , , , ,
  • Краткий экскурс в профайлинг JS

    Недавно с коллегой переписывался о том, как нужно делать профайлиг JavaScript-кода. Решил, может информация будет еще кому-нибудь полезна. Предыстория: коллега делает анимацию на JS, пытаемся понять, почему она сильно тормозит.

    Внёс изменения. Поставил таймер на mouseOver. Получается, что функция calculateSize выполняется 20-23ms. До этого примерно так и было.

    Нужно не таймером, а профайлером замерять (есть в Firebug и последних версиях Webkit).

    Ну я имею в виду функцию FireBug’а console.time() и console.timeEnd(). Они делают то же, что профайлер, только для определенного куска кода.

    Так а зачем тебе для определенного куска в данном случае? Тебе же нужно видеть, какие именно функции у тебя выполняются в данный момент времени и искать проблемные места, а не произвольно замерять функции.

    Я просто не могу понять в этом профайлере где именно тормозит. Там всё исписано в init() 🙂

    Вот смотри, сейчас профайлер тебе говорит, что во время работы твоего эффекта больше всего ресурсов жрет функция init() из jQuery, которая вызывается почти 6000 раз:

    firebug1

    Так как сама по себе эта информация нам мало полезна, тебе нужно найти ту функцию, которая так часто вызывает init(). Для этого отсортируем данные по колонке Time (общее время выполнения функции). Видим, что на первом и втором месте стоит jQuery-функция, а на 3 и 4 — функции calculateSize() и imgSize(), время выполнения которых — 588 и 547 мс соответcтвенно.

    firebug2

    Тут явно видно, что сами эти функции выполняются очень быстро (см. Own Time), но вот они вызывают другие функции, которые и дают те самые 588 и 547 мс.

    Смотрим calculateSize(), проблемные места:

    var prevImg = slctdImg.parent().prevAll();
    var nextImg = slctdImg.parent().nextAll();
    

    Это все выборки по дереву, очень тяжелые операции.

    Смотрим imgSize(), проблемные места:

    imgCont.width(newWidth).height(newHeight);
    imgCont.css({
    	width: newWidth,
    	height: newHeight,
    	margin: (!dir) ? "0 0 " + k + "px 0" : k + "px 0 0 0",
    	zIndex: count - num,
    	opacity: 1 - (num) / 30
    });
    

    два раза устанавливаешь width и height

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

    Метки: , , ,
  • rocon — подробности

    Рассмотрим, как работает библиотека rocon.

    rocon дожидается загрузки DOM-дерева документа и ищет все элементы с классом rcN, где N — радиус скругления, и добавляет им скругленные уголки.

    Safari

    Создается новая новая таблица стилей в документе, в которой классам rcN указываются CSS-свойства -webkit-border-radius и -khtml-border-radius.

    Firefox

    По аналогии с Safari указывается CSS-свойство -moz-border-radius.

    Opera

    Через <canvas> рисуется звездочка, которая затем преобразуется в data: URL картинку. Затем для каждого уголка создается по отдельному элементу и каждому указывается эта картинка в качестве фона. Все CSS-свойства указываются в таблице стилей, а не в самих элементах (это значит, что их можно легко перекрывать).

    Internet Explorer

    Такой же способ, как и у Opera, только используется VML. Соответственно, уголок вставляется как элемент, а не как фоновая картинка.

    С первыми двумя случаями все довольно просто: используем внутренние возможности браузера для рисования скругленных уголков. Для двух последних все намного сложнее. После инициализации основному блоку указывается класс rocon-init — это значит, что элемент был инициализирован. Также добавляется класс rocon__N, где N — некий порядковый номер, характеризующий набор уникальных свойств блока: радиус скругления, цвет фона, толщина бордюра и так далее. Соответственно, если попадаются элементы с одинаковым набором этих характеристик, новые уголки не рисуются, а достаются из кэша. Для каждого создаваемого элемента с уголком присваиваются классы rocon-tl, rocon-tr, rocon-bl, rocon-br, что означает, соответственно, левый верхний, правый верхний, левый нижний и правый нижний. Все стили записываются в новую таблицу стилей, а не в сам элемент. Тем самым вы можете менять некоторые свойства уголка через CSS, что будет особенно полезно в IE6. Дело в том, что в этом браузере неправильно работают CSS-свойства right и bottom. И если первое свойство я смог эмулировать с помощью margin-left: 100%, то со вторым проблема: я пока не знаю, как это можно исправить. Поэтому вам придется указывать вручную его позицию. Так как уголок добавляется в самый конец блока, вы можете воспользоваться тем, что его сместит контент блока в самый низ и подкорректировать его позицию с помощью свойства margin-top (на забудьте поставить bottom: auto).

    Можно в любой момент добавить любому блоку скругление или поменять его свойства (радиус, цвет фона и так далее). Чтобы изменения вступили в силу, нужно вызвать метод rocon.update(elem), где elem — указатель на элемент, который нужно обновить.

    Все пожелания и комментарии просьба указывать в багтрекере.

    Метки: , ,
  • Производительность браузеров в зависимости от верстки

    Один из моих докладов для конференции Clienttech 2008 (второй был про ictinus).

    У меня наконец-то дошли руки до описания известных мне проблем с производительностью в браузерах в зависимости от того, как сверстаешь страницу. Результаты тестов говорят сами за себя: Opera ни разу не «самый быстрый браузер на планете» (в моем рейтинге качества браузеров последние версии Оперы находятся примерно между IE7 и IE6), а восторженные вопли о быстрых JavaScript-движках я воспринимаю как говеный пиар. На кой черт мне сдались ваши ускоренные работы со строками и массивами, когда банальное изменение размеров картинки, даже не динамическое, вызывает жуткие тормоза? Почему разработчики браузеров не оптимизируют то, что действительно требует оптимизации? Спросите сами себя, для чего вы чаще используете JavaScript на сайтах: для работы со встроенными JavaScript-объектами или для работы c DOM? Ведь именно работа с DOM — самое узкое место современных браузеров.

    В этом свете мне наиболее близка позиция Майкрософта. Где-то, не помню где, они написали что-то вроде: «Оптимизировать работу чистого JavaScript будет только безумец».

  • Eclipse: редактирование JavaScript в Spket IDE

    Демонстрация возможностей редактирования JavaScript в плагине Spket IDE.

    Метки: ,

новое →