Research on performance in modern client-side web-frameworks

• Published in: Программные системы и вычислительные методы no. 2; pp. 63 - 78
• Main Author: Ratushniak, Evgenii Alekseevich
• Format: Journal Article
• Language: English
• Published: 01.02.2025
• ISSN: 2454-0714; 2454-0714
• DOI: 10.7256/2454-0714.2025.2.74392

The subject of the study is the comparative rendering performance of three modern frameworks — React, Angular, and Svelte — in typical scenarios of building and updating user interfaces in web applications. The object of the study is the frameworks themselves as complexes of technological solutions, including change detection mechanisms, virtual or compiled DOM structures, and accompanying optimizations. The author thoroughly examines aspects of the topic such as initial and subsequent rendering, element update and deletion operations, and working with linear and deeply nested data structures. Special attention is paid to the practical significance of choosing a framework for commercial products, where performance differences directly impact conversion, user experience, and the financial efficiency of the project. Key internal mechanisms are described — React's virtual DOM, Angular's change detector, and Svelte's compiled code — which determine their behavior in various load scenarios. The methodology is based on an automated benchmark: a unified set of test scenarios is executed by client applications on React, Angular, and Svelte, a reference JavaScript solution, and an Express JS orchestrator server; operation times are recorded using performance.now() in Chrome 126, with Time To First Paint as the performance criterion. The novelty of the research lies in the comprehensive laboratory comparison of the three frameworks across four critically important scenarios (initial rendering, subsequent rendering, updating, and deleting elements) considering two types of data structures and referencing the current versions of 2025. The main conclusions of the study are as follows: Svelte provides the lowest TTFP and leads in deep hierarchy scenarios due to the compilation of DOM operations; React shows better results in re-rendering long lists, using an optimized diff algorithm and element keys; Angular ensures predictability and architectural integrity but increases TTFP by approximately 60% due to the change detector. There is no universal leader; a rational choice should rely on the analytical profile of the operations of a specific application, which is confirmed by the results of the presented experiment.