Научная статья на тему 'Исследование производительности алгоритмов анимации на Javascript'

Исследование производительности алгоритмов анимации на Javascript Текст научной статьи по специальности «Компьютерные и информационные науки»

CC BY
191
50
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
АНИМАЦИЯ / ПРОИЗВОДИТЕЛЬНОСТЬ / JAVASCRIPT / CSS3 / ANIMATION / PERFORMANCE

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Селькин В. Е.

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

i Надоели баннеры? Вы всегда можете отключить рекламу.
iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

STUDY THE PERFORMANCE OF ALGORITHMS ANIMATION FOR JAVASCRIPT

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.

Текст научной работы на тему «Исследование производительности алгоритмов анимации на Javascript»

3. D'jakov A. F., Platonov V. V. Zanizhenie tarifov na jelektrojenergiju - populistskoe nasilie, razrushajushhee jekonomiku Rossii // Jenergetik. - 2002. - № 6. - S. 2-7.

4. Minakov V. F., Minakova T. E. Issledovanie dinamiki proizvodstva jelektrojenergii re-giona // Vestnik Severo-Kavkazskogo federal'nogo universiteta. - 2005. - № 4. - S. 74-77.

5. D'jakov A. F., Platonov V. V. O problemah vysshego jenergeticheskogo i jelektrotehnicheskogo obrazovanija v Rossii // Jelektrichestvo. - 2011. - № 12. - S. 2-11/

6. Minakova T. E., Lobanov O. S., Galstjan A. Sh. Jenergosberezhenie: infrastrukturnyj podhod // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2014. - № 7-1 (26). - S. 54-55.

7. Minakova T. E., Minakov V. F. Modelirovanie iznosa izoljacii trehfaznyh asinhronnyh jelektrodvigatelej 0,4 kV // Izvestija vysshih uchebnyh zavedenij. Jelektromehanika. - 2014. - № 3. - S. 94-95.

8. Minakov V. F., Minakova T. E. Sposob kontrolja simmetrii trehfaznogo naprjazhenija // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2014. - № 3-2 (22). - S. 39-40.

9. Minakov V. F., Minakova T. E. Linejno-garmonicheskij analiz opticheskih spektrov // Materialy 3-j nauchno-prakticheskoj internet-konferencii Mezhdisciplinarnye issledovanija v oblasti matematicheskogo modelirovanija i informatiki. - Ul'janovsk. - 2014. - S. 288-294.

10. Minakova T. E., Minakov V. F. Obobshhennaja model' iznosa jelektrodvigatelej // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2013. - № 12-1 (19). - S. 108-110.

11. Minakova T. E., Minakov V. F. Parallel'naja rabota kabel'noj i vozdushnoj linij jelektroperedachi // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2013. - № 11-1 (18). - S. 113-114.

12. Minakova T. E., Minakov V. F. Jenergosberezhenie - mul'tiplikator jeffektivnosti jekonomiki // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2013. - № 11-2 (18). - S. 60-61.

13. Minakova T. E., Minakov V. F. Integracija sredstv zashhity jelektrodvigatelej sel'skohozjajstvennogo proizvodstva // Nauchnoe obozrenie. - 2013. - № 10. - S. 172-176.

14. Minakova T. E., Minakov V. F. Blochnaja struktura sredstv relejnoj zashhity i avtomatiki // Al'manah sovremennoj nauki i obrazovanija. Tambov: Gramota. - 2013. - № 10 (77). - S. 114-116.

15. Minakov V. F., Korchagin D. N., Korol' A. S., Shevcov M. A. Pustahajlov S. K. Matematicheskoe modelirovanie avtomatizirovannyh informacionnyh processov // Vestnik Severo-Kavkazskogo federal'nogo universiteta. - 2006. - № 3. - S. 15-19.

16. Shevcov M. A., Pustahajlov S. K., Minakov V. F. Ustrojstvo dlja zashhity jelektrooboru-dovanija i izmerenija vremeni dejstvija peregruzochnogo toka. Patent RF na poleznuju model' RU 54461 U1 H01H 3/08. Zareg. 27.06.2006 g.

17. Maslov V. I., Minakov V. F. Jelastichnost' kachestva po cene i zatratam // Standarty i kachestvo. - 2012. - № 9 (903). - S. 88-90.

18. Minakov V. F., Minakova T. E. Sposob bystrodejstvujushhej zashhity jelektrodvigatelej ot nesostojavshihsja puskov // Al'manah sovremennoj nauki i obrazovanija. Tambov: Gramota. - 2013. - № 9 (76). - S. 113-115.

19. Minakov V. F., Minakova T. E. Sposob zashhity dvigatelej ot nesostojavshihsja puskov // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2013. - № 12-1 (19). - S. 106-107.

20. Minakova T. E., Minakov V. F. Blochnaja struktura sredstv relejnoj zashhity i avtomatiki // Al'manah sovremennoj nauki i obrazovanija. Tambov: Gramota. - 2013. - № 10 (77). - S. 114-116.

21. Patent 2117380 Rossijskaja Federacija, MPK6 H 02 P 5/04. Ustrojstvo dlja zashhity jelektro- i tehnologicheskogo oborudovanija / Minakov V. F., Platonov V. V., Minakov E. F., Minakova T. E., Sharipov I. K., Andreev V. G., Syshhikov V. P.; patentoobladatel' Stavrop. s./h. in-t. - № 93027024/09; zajavl. 25.05.93; opubl. 10.08.98.

22. Minakova T. E., Minakov V. F. Otkrytaja arhitektura relejnoj zashhity i avtomatiki // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2013. - № 12-1 (19). - S. 110-111.

23. Minakov V. F., Red'kin V. M., Os'kina G. M., Minakova T. E. Matematicheskoe modelirovanie puskovyh rezhimov trehfaznyh asinhronnyh dvigatelej // Vestnik Severo-Kavkazskogo federal'nogo universiteta. - 2003. - № 1. - S. 226-234.

24. Minakov V. F.,, Red'kin V. M., Minakova T. E., Churkin D. G. Metodika tipizacii parametrov dvigatelej serii 4 A // Izvestija vysshih uchebnyh zavedenij. Jelektromehanika. - 1993. - № 6. - S. 77.

25. Minakov V. F., Kuzhekov S. L., Negrimovskij P. Ja. Relejnaja zashhita jelektricheskih mashin s tiristornymi razgonnymi ustrojstvami // Izvestija vysshih uchebnyh zavedenij. Jelektromehanika. - 1984. - № 11. - S. 127.

26. Minakova T. E., Minakov V. F. Sinergija jenergosberezhenija pri vysokoj dobavlennoj stoimosti produkcii // Sovremennye problemy nauki i obrazovanija. - 2013. - № 4. - S. 26.

27. Minakov V. F., Minakova T. E., Barabanova M. I. Jekonomiko-matematicheskaja model' jetapa kommercializacii zhiznennogo cikla innovacij // Nauchno-tehnicheskie vedomosti Sankt-Peterburgskogo gosudarstvennogo politehnicheskogo universiteta. Jekonomicheskie nauki = St. Petersburg State Polytechnical University Journal. Economics. - 2012. - T. 2-2. № 144. - S. 180-184.

28. Barabanova M. I., Vorob'ev V. P., Minakov V. F. Jekonomiko-matematicheskaja model' dinamiki dohoda otrasli svjazi Rossii // Izvestija Sankt-Peterburgskogo universiteta jekonomiki i finansov. - 2013. - № 4 (82). - S. 24-28.

29. Minakov V. F., Lobanov O. S. Koncepcija oblachnogo informacionnogo prostranstva ispolnitel'nyh organov gosudarstvennoj vlasti regiona // Jekonomika, statistika i informatika. Vestnik UMO. - 2014. - № 3. - S. 181-185.

30. Minakov V. F., Artem'ev A. V., Lobanov O. S. Model' dinamiki tehnologicheskih innovacij // Mezhdunarodnyj nauchno-issledovatel'skij zhurnal = Research Journal of International Studies. - 2014. - № 2-1 (21). - S. 110-111.

Селькин В.Е.

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

оптики

ИССЛЕДОВАНИЕ ПРОИЗВОДИТЕЛЬНОСТИ АЛГОРИТМОВ АНИМАЦИИ НА 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.

25

В настоящий момент стандарты веб-разработки стремительно развиваются. Если раньше для создания динамических элементов интерфейса использовались библиотеки на основе программной анимации 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 - Результаты тестирования производительности

временная линия

алгоритм диаграмма время исполнения

memory heap

LOOOms 1200ms 1400ms 1600ms IfiGOms 2000ms 2200ms 2400ms 2600ms 2300ms 30 0-r

■■HIM

CSS3 (transition)

Range: SSfinri5-2.3^s

03.0 89 ms Scripting 03S5455 ms 7ercenng 0802,623 ms ^airt'rg 0392.070 ms Other 457,040 ms idle

1583 мс без учёта простоя

1,8 Мб

JavaScript (setlnterval)

2002 мс без учёта простоя

от 1,8 до 3 Мб

26

Из полученных результатов видно, что механизм на 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-Sevenier, 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-Sevenier, 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).

Вдовин С.И.1, Харитонова И.Ю.2

'Кандидат технических наук, доцент, Нижегородский государственный технический университет им. Р.Е.Алексеева; 2кандидат технических наук, доцент, Нижегородский государственный технический университет им. Р.Е.Алексеева МАТЕМАТИЧЕСКАЯ МОДЕЛЬ РАСПРОСТРАНЕНИЯ ПЛЕНОЧНОГО РЕЖИМА КИПЕНИЯ

Аннотация

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

Ключевые слова: математическое моделирование, режим кипения, численный алгоритм.

Vdovin S.L1, Kharitonova I.Yu.2

'Candidate of Sciences in Technics, assosiate professor, Nizhny Novgorod State Technical University n.a. R.E. Alekseev, 2Candidate of Sciences in Technics, assosiate professor, Nizhny Novgorod State Technical University n.a. R.E. Alekseev. MATHEMATICAL MODEL OF THE FILM BOILING DISTRIBUTION

Abstract

In the article a mathematical model is constructed for calculation of the running heat wave that transforms the bubble boiling into the film boiling on the surface of a fuel element. Control calculations are carried out that allow to set limits on the minimum step in the spatial coordinate.

Keywords: mathematical modeling, boiling regime, numerical algorithm.

Увеличение единичной мощности энергетической установки (ЭУ) лимитируется требованиями надежного отвода тепла из активной зоны (АЗ). Применительно к водо-водяным кипящим реакторам эта проблема тесно связана с ограничениями по кризису теплообмена и с обеспечением устойчивости стационарного режима. При этом главный фактор, препятствующий увеличению уровня мощности реактора, может меняться при изменении режимных параметров ЭУ [1].

В работе [2] при изучении явления перехода пузырькового режима кипения в пленочный (на нагреваемых током нитях и стержнях) было замечено, что смена происходит путем возникновения бегущей тепловой волны, меняющей режим кипения на поверхности тепловыделяющего элемента. Экспериментальный и расчетный анализ изменения теплофизических параметров нити накаливания и устойчивости к локальным возмущениям проводился в [3-6].

В настоящей работе, используя разработанный численный алгоритм, исследуется явление формирования и распространения волны пленочного режима кипения применительно к реальным топливным элементам. Анализируется изменение температурного режима и влияние некоторых конструктивных и режимных параметров на скорость рассматриваемых процессов. Эти вопросы представляют интерес при изучении начальных этапов развития аварий, связанных с перегревом твэлов. Сложность расчета обусловлена сильным разнесением характерных пространственных (температурный фронт ~ 10-3 м, высота АЗ ~ 1 м) и временных (постоянная прогрева горючего ~ 10 с, элемента оболочки твэла ~ 10-2 с) масштабов.

Описание математической модели и алгоритма расчета

Уравнения теплового баланса для горючего и оболочки твэла в одноточечном приближении их описания в поперечном сечении z запишем в виде:

д

(pcV)r — T = V-n - SrK(Tr - TCT);

dt r

(1)

27

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.