A Cross-Device and Cross-OS Benchmark of Modern Web Animation Systems

TL;DR

This paper benchmarks web animation performance across devices and operating systems to help developers choose the best technology for their needs.

Contribution

A unified benchmark for evaluating modern web animation systems across platforms and object scales.

Findings

DOM-based animations perform well up to 100 objects but degrade at 500.

Canvas-based rendering supports higher object counts effectively.

WebGL provides the most stable performance for large-scale animations.

Abstract

Although modern web technologies increasingly rely on high-performance rendering methods to support rich visual content across a range of devices and operating systems, the field remains significantly under-researched. The performance of animated visual elements is affected by numerous factors, including browsers, operating systems, GPU acceleration, scripting load, and device limitations. This study systematically evaluates animation performance across multiple platforms using a unified set of circle-based animations implemented with eight web-compatible technologies, including HTML, CSS, SVG, JavaScript, Canvas, and WebGL. Animations were evaluated under controlled feature combinations involving random motion, distance, colour variation, blending, and transformations, with object counts ranging from 10 to 10,000. Measurements were conducted on desktop operating systems (Windows, macOS, Linux) and mobile platforms (iOS, Android), using CPU utilisation, GPU memory usage, and frame rate (FPS) as key metrics. Results show that DOM-based approaches maintain stable performance at 100 animated objects but exhibit notable degradation by 500 objects. Canvas-based rendering extends usability to higher object counts, while WebGL demonstrates the most stable performance at large scales (5000–10,000 objects). These findings provide concrete guidance for selecting appropriate animation technologies based on scene complexity and target platform.

Figures