Как стать автором
Обновить

Продвинутые анимации с requestAnimationFrame

JavaScript *
Перевод
Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)

Что такое requestAnimationFrame?


Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL

Зачем я должен это использовать?


Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Читать дальше →
Всего голосов 27: ↑25 и ↓2 +23
Просмотры 65K
Комментарии 36

Вышла первая бета-версия jQuery 1.6

jQuery *
В официальном блоге jQuery выложена новость о том, что близится появление jQuery 1.6 и, стало быть, бета-версия позволит всем желающим заранее проверить совместимость нового кода со своими приложениями, убедиться в отсутствии проблем, при необходимости сообщить об ошибках в новой версии, и так далее.

Код jQuery beta 1 доступен для скачивания из jQuery CDN.

Список изменений в этой версии состоит из 45 строк, упоминающих 47 решённых проблем. Большей частью они посвящены обезжучиванию (избавлению от багов) и отлаживанию (избавлению от лажи), но там есть и с полдесятка небезынтересных новинок:
  • Подобно методу .bind(), методы .delegate() и .live() теперь приемлют false в качестве сокращения кода function(){return false;}.
     
  • Методы .is() и .not() теперь умеют принимать элементы DOM и коллекции jQuery в качестве аргументов.
     
  • Метод .clean() не будет воздействовать на элементы script, не имеющие типа «text/javascript».
     
  • В методе .css() появилась поддержка строк, содержащих относительные значения.
     
  • Новая функция requestAnimationFrame будет использоваться вместо прежней setInterval для анимаций, если она есть во браузере.
Всего голосов 66: ↑52 и ↓14 +38
Просмотры 516
Комментарии 12

Улучшаем производительность HTML5 canvas

Разработка веб-сайтов *
Перевод
В последнее время мне везет натыкаться на интересные статьи для перевода. На этот раз – статья на HTML5Rocks о производительности HTML5 canvas. Автор пишет о некоей стене, в которую упираются разработчики при создании приложений. Какое-то время назад в нее уперся и я при портировании старой-доброй игры на canvas.

К сожалению, графики в оригинале вставлены через iframe. Я мог бы сделать снимки и разместить их изображения, но сам автор позиционирует графики актуальными и такими, которые будут обновляться, потому я просто разместил на них ссылки. Приятного чтения!


image
  1. Вступление
  2. Тестирование производительности
  3. Предварительно отрисовывайте в виртуальный canvas
  4. Группируйте вызовы
  5. Избегайте ненужных изменений состояния
  6. Отрисовывайте только разницу, а не весь холст
  7. Используйте многослойных canvas для сложных сцен
  8. Избегайте shadowBlur
  9. Различные способы очистить экран
  10. Избегайте нецелых координат
  11. Оптимизируйте анимации с помощью 'requestAnimationFrame'
  12. Большинство мобильных реализаций canvas – медленные
  13. Заключение
  14. Ссылки



Вступление


HTML5 canvas, который начинался, как эксперимент компании Apple, – наиболее широко распространенный стандарт для 2D режима непосредственной графики в интернет. Многие разработчики использую его в широком круге мультимедиа проектов, визуализаций и игр. Как бы то ни было, с ростом сложности приложений, разработчики нечаянно натыкаются на стену производительности.
Читать дальше →
Всего голосов 116: ↑113 и ↓3 +110
Просмотры 35K
Комментарии 42

Smooth scroll на AngularJS с использованием requestAnimationFrame + советы по стилю

JavaScript *Angular *
Мне пришлось написать свою библиотеку плавной прокрутки для Angular приложения. О том, что у меня получилось, и почему я это вообще затеял — под катом. Попутно расскажу о своих любимых приёмах оформления модулей для AngularJS.
Читать дальше →
Всего голосов 20: ↑15 и ↓5 +10
Просмотры 13K
Комментарии 19

Javascript: проблемы с click event при использовании requestAnimationFrame

JavaScript *
Из песочницы
Неожиданно столкнулся с забавной проблемой. Кратко суть можно описать так. Допустим, вы используете requestAnimationFrame для динамического изменения цвета текста, например таким образом:

function render() {
  element.innerHTML = "<font color='#555'>some text</font>";
  requestAnimationFrame(render);
}

Если теперь на element (либо на весь документ) повесить обработчик события onclick, а потом кликнуть по тексту, то… ничего не происходит.
Читать дальше →
Всего голосов 12: ↑5 и ↓7 -2
Просмотры 4.8K
Комментарии 8

Обновление document.title в фоновой вкладке

JavaScript *
Из песочницы
Предположим, что у нас есть сайт по продаже билетов, на котором мы хотим в document.title показывать цену, чтобы увеличить удовлетворённость пользователей и дать им знать, что в какой вкладке у них открыто (т.к. мы не знаем, будет ли меняться место отправления/прибытия, дата, любимый перевозчик и так далее, а цена, напротив, для различных комбинаций практически всегда разная). При этом мы знаем, что, начиная с версии 56, Chrome проводит политику блокировки фоновых вкладок. Что это означает для данного функционала?
Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Просмотры 4.1K
Комментарии 5

Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome

JavaScript *Браузеры
Как думаете, что произойдет, если запустить в консоли браузера этот фрагмент кода?

function foo() {
  setTimeout(foo, 0);
}

foo();

А этот?

function foo() {
  Promise.resolve().then(foo);
}

foo();

Если вы также, как и я, прочитали кучу статей про Event Loop, Main Thread, таски, микротаски и прочее, но затрудняетесь ответить на вопросы выше — эта статья для вас.
Читать дальше →
Всего голосов 50: ↑47 и ↓3 +44
Просмотры 109K
Комментарии 16

JavaScript: заметка о requestAnimationFrame и requestIdleCallback

Блог компании Timeweb Cloud Разработка веб-сайтов *JavaScript *Браузеры


Привет, друзья!


Можете ли вы ответить на вопрос о том, в чем заключается разница между requestAnimationFrame и requestIdleCallback?


Если можете, то я завидую глубине ваших знаний. Я не смог, когда меня об этом спросили. Более того, в тот момент я даже не знал о существовании интерфейса requestIdleCallback. Теперь знаю и хочу с вами этими знаниями поделиться.


Сразу уточним, что названные интерфейсы предоставляются браузером и к ECMAScript отношения не имеют.


Что касается поддержки, то с requestAnimationFrame все хорошо, а с requestIdleCallback, в основном из-за Safari, этого современного IE, ситуация хуже.


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

Читать дальше →
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 13K
Комментарии 6