ИССЛЕДОВАНИЕ ПРОИЗВОДИТЕЛЬНОСТИ АЛГОРИТМОВ АНИМАЦИИ НА JAVASCRIPT

Селькин В.Е.

Магистр, Санкт-Петербургский национальный исследовательский университет информационных технологий, механики и оптики

ИССЛЕДОВАНИЕ ПРОИЗВОДИТЕЛЬНОСТИ АЛГОРИТМОВ АНИМАЦИИ НА JAVASCRIPT

Аннотация

В статье рассмотрены алгоритмы анимации элементов интерфейса веб-приложений. Целью данной статьи является исследование производительности рассматриваемых алгоритмов. Результаты проведённого исследования могут быть использованы для разработки библиотеки анимации на Javascript.

Ключевые слова: анимация, производительность, javascript, css3.

Selkin V.E.

Master of Science, Saint-Petersburg National Research University of Information Technologies, Mechanics and Optics

STUDY THE PERFORMANCE OF ALGORITHMS ANIMATION FOR JAVASCRIPT

Abstract

The article describes the algorithms animation interface elements web applications. The purpose of this article is to investigate the performance of the considered algorithms. The results can be used to develop animation Javascript library.

Keywords: animation, performance, javascript, css3.

В настоящий момент стандарты веб-разработки стремительно развиваются. Если раньше для создания динамических элементов интерфейса использовались библиотеки на основе программной анимации Javascript [1][2], то сейчас уже существуют спецификации, реализующие анимацию “нативными” средствами [3][4]. Однако реализация анимационных эффектов, требующих при окончании вызов complete-функции, по-прежнему осуществляется с использованием  программных средств Javascript.

С технической точки зрения анимация элементов интерфейса приложения осуществляется последовательным изменением стилистических свойств в DOM. В зависимости от того как происходит процесс изменения CSS-свойств во времени, различают несколько видов механизмов анимации: с помощью программных средств Javascript и с помощью возможностей CSS3 [5].

При первом подходе изменение стилевых свойств в механизме анимации реализуется с помощью временных функций Javascript, рекурсивного таймера и интервала. Интервальный метод заключается в периодическом выполнении кода по изменению CSS. При этом вызов функции осуществляется строго через установленный период, что способствует получению одного анимационного кадра за промежуток времени. При достижении конечного значения, происходит остановка интервала. С точки зрения Javascript таймер представляет собой исполнение программного кода с заданной задержкой. Однако при его рекурсивном вызове его можно использовать как анимацию. Основное его отличие от интервального метода заключается в том, что выполнение следующего шага анимации осуществляется через промежуток времени, равный величине заданной задержки. Каждый последующий рекурсивный шаг вызывается только после выполнения предыдущего [6].

Второй подход предполагает реализацию двумя способами: с помощью ключевых кадров, с помощью переходов. Ключевые кадры представляют собой описание в таблице стилей состояний визуализации, между которыми происходит анимация. Старт анимации осуществляется после того как интерпретатор найдёт инициализацию свойства animate. Данный метод имеет низкую практичность при взаимодействии с Javascript, поскольку Javascript не имеет возможность повлиять на содержимое продекларированных ключевых кадров. Переходы представляют собой инициализацию свойства transition с параметрами анимации, которое, как правило, описывают у псевдокласса, например, hover. Так как все параметры анимации указываются у свойства transition, то это позволяет манипулировать анимированием через inline-стили, что делает данный способ очень практичным при взаимодействии с Javascript [3][4].

Для оценки производительности каждого из механизмов были проанализированы временная линия и затраты ресурсов оперативной памяти в webkit-инструменте разработчика (см. табл. 1). Суть тестируемой анимации заключался в изменении параметров высоты, ширины и прозрачности 90 блоков каждым из вышеописанных алгоритмов. Опыт проводился на PC со следующими характеристиками: ОС - MS Windows 7, CPU - Intel Core i5-3230M 2.60GHz, RAM - 6Gb, GPU - GeForce GT 740M.

Таблица 1 – Результаты тестирования производительности

Из полученных результатов видно, что механизм на CCS3 по чистому времени исполнения реализации превосходит в 1.3 раза метод на Javascript, а по затратам памяти в 1.7 раз. Это объясняется тем, что переходы transition, в отличии от интервального метода Javascript, реализованы программными средствами C++, что позволяет при исполнении задействовать ресурсы GPU. Вследствие этого анимация на CSS3 будет лучше происходить даже на платформах со слабыми вычислительными ресурсами – на телефонах и смартфонах, в использовании которых образовалась активная тенденция.

Результаты этого исследования показывают, что актуальным алгоритмом создания анимации при проектировании интерфейса веб-приложений является алгоритм, реализованный анимационными переходами CSS, поскольку он даёт большую производительность, чем алгоритм, реализованный программными средствами Javascript.

Литература

1. The introduction to mootools architecture / Sun, L., Xing, H.M., Zeng, Y. // Applied Mechanics and Materials, 2014. - vol. 496 – 500. - P. 2328 – 2331.
2. jQuery API Documentation // API.JQUERY.COM: официальная документация к библиотеке jQuery, 2014. URL: http://api.jquery.com/ (дата обращения: 18.10.2014).
3. CSS Transitions Documentation // W3.ORG: официальный сайт World Wide Web Консорциума, 2014. URL: http://www.w3.org/TR/css3-transitions/ (дата обращения: 18.10.2014).
4. CSS Animations Documentation // W3.ORG: официальный сайт World Wide Web Консорциума, 2014. URL: http://www.w3.org/TR/css3-animations/ (дата обращения: 18.10.2014).
5. Graphics programming for the web / Joshi, P., Bourges-Sévenier, M., Russell, K., Mo, Z. // ACM SIGGRAPH 2012 Courses, SIGGRAPH'12, 2012.
6. The standart ECMA-262 Edition 5 // ECMASCRIPT.ORG: официальный сайт по стандарту ECMA-262, 2009. URL: http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf (дата обращения: 18.10.2014).

Refernces

1. The introduction to mootools architecture / Sun, L., Xing, H.M., Zeng, Y. // Applied Mechanics and Materials, 2014. - vol. 496 – 500. - P. 2328 – 2331.
2. jQuery API Documentation // API.JQUERY.COM: oficial'naja dokumentacija k biblioteke jQuery, 2014. URL: http://api.jquery.com/ (data obrashhenija: 18.10.2014).
3. CSS Transitions Documentation // W3.ORG: oficial'nyj sajt World Wide Web Konsorciuma, 2014. URL: http://www.w3.org/TR/css3-transitions/ (data obrashhenija: 18.10.2014).
4. CSS Animations Documentation // W3.ORG: oficial'nyj sajt World Wide Web Konsorciuma, 2014. URL: http://www.w3.org/TR/css3-animations/ (data obrashhenija: 18.10.2014).
5. Graphics programming for the web / Joshi, P., Bourges-Sévenier, M., Russell, K., Mo, Z. // ACM SIGGRAPH 2012 Courses, SIGGRAPH'12, 2012.
6. The standart ECMA-262 Edition 5 // ECMASCRIPT.ORG: oficial'nyj sajt po standartu ECMA-262, 2009. URL: http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf (data obrashhenija: 18.10.2014).