Measuring the performance of techniques for dynamic 2D animation in web browsers

Abstract

The study is evaluate the efficacy of diverse 2D animation techniques on web pages, with a particular emphasis on dynamic CSS variable notation (in single-line and two-line formats), jQuery, anime.js, and Velocity.js. The analysis entailed the translation of objects within an abstract model of C programming comprehension, with the objective of measuring the average execution time and the variance across multiple web browsers. The findings indicated that single-line CSS variable notation was the most efficient, exhibiting superior performance compared to two-line notation by 44.07% and 48.91% for 1,000 and 50 objects, respectively. It is noteworthy that anime.js exhibited the least efficient performance with 25 objects, demonstrating a 49.66% discrepancy in performance. Native browser technologies demonstrated superior outcomes compared to JavaScript libraries, which exhibited slower processing times despite being perceived as high-performance solutions. Despite its reputation as an outdated technology, jQuery exhibited competitive rendering speeds. The findings of this study underscore the significance of optimization in animation techniques and rendering efficiency.