Modern Web Frameworks : A Comparison of Rendering Performance

Show full item record



Permalink

http://hdl.handle.net/10138/343674

Citation

Ollila , R , Mäkitalo , N & Mikkonen , T 2022 , ' Modern Web Frameworks : A Comparison of Rendering Performance ' , Journal of Web Engineering , vol. 21 , no. 3 , pp. 789-813 . https://doi.org/10.13052/jwe1540-9589.21311

Title: Modern Web Frameworks : A Comparison of Rendering Performance
Author: Ollila, Risto; Mäkitalo, Niko; Mikkonen, Tommi
Contributor organization: Department of Computer Science
Empirical Software Engineering research group
University of Helsinki
Date: 2022
Language: eng
Number of pages: 25
Belongs to series: Journal of Web Engineering
ISSN: 1540-9589
DOI: https://doi.org/10.13052/jwe1540-9589.21311
URI: http://hdl.handle.net/10138/343674
Abstract: Recent years have seen the rise of a new generation of UI frameworks for web application development. These frameworks differ from previous generations of JavaScript frameworks in that they define a declarative application development model, where transitions in the state of the UI are managed by the framework. This potentially greatly simplifies application development, but requires the framework to implement a rendering strategy which translates changes in application state into changes in the state of the UI. The performance characteristics of these rendering strategies have thus far been poorly studied. In this article, we describe the rendering strategies used in the frameworks Angular, React, Vue, Svelte and Blazor, which represent some of the most influential and widely used modern web frameworks. We find significant differences in the scaling of costs in their rendering strategies with potentially equally significant practical performance implications. To verify these differences, we implement a number of benchmarks that measure the scaling of rendering costs as an application grows in complexity. The results of our benchmarks confirm that under certain circumstances, performance differences between frameworks can range up to several orders of magnitude when performing the same tasks. Furthermore, we find that the relative performance of a rendering strategy can be effectively estimated based on factors affecting the input sizes of render loops. The best performing rendering strategies are found to be ones which minimize input sizes using techniques such as compile-time optimization and reactive programming models.
Subject: Web framework performance
declarative rendering
virtual DOM
frontend frameworks
single-page application frameworks
angular
react
vue
svelte
blazor
113 Computer and information sciences
Peer reviewed: Yes
Usage restriction: openAccess
Self-archived version: publishedVersion


Files in this item

Total number of downloads: Loading...

Files Size Format View
Mikkonen_Modern_web_frameworks.pdf 855.5Kb PDF View/Open

This item appears in the following Collection(s)

Show full item record