Pull to refresh

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

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

Что такое requestAnimationFrame?


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

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


Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Views 65K
Comments 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 для анимаций, если она есть во браузере.
Total votes 66: ↑52 and ↓14 +38
Views 506
Comments 12

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

Website development *
Translation
В последнее время мне везет натыкаться на интересные статьи для перевода. На этот раз – статья на 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 режима непосредственной графики в интернет. Многие разработчики использую его в широком круге мультимедиа проектов, визуализаций и игр. Как бы то ни было, с ростом сложности приложений, разработчики нечаянно натыкаются на стену производительности.
Читать дальше →
Total votes 116: ↑113 and ↓3 +110
Views 35K
Comments 42

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

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

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

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

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

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

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

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

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

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

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

foo();

А этот?

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

foo();

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

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

Timeweb Cloud corporate blog Website development *JavaScript *Browsers


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


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


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


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


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


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

Читать дальше →
Total votes 18: ↑18 and ↓0 +18
Views 12K
Comments 6