Modern Web Frameworks: A Comparison of Rendering Performance

Authors

DOI:

https://doi.org/10.13052/jwe1540-9589.21311

Keywords:

web framework performance, declarative rendering, virtual DOM, frontend frameworks, javascript frameworks, single-page application frameworks, angular, react, vue, svelte, blazor

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.

Downloads

Download data is not yet available.

Author Biographies

Risto Ollila, Intruder Systems Ltd, London, UK

Risto Ollila is a software engineer at Intruder Systems Ltd. He earned his B.Sc degree in computer science at the University of Helsinki in 2017 and will receive his M.Sc. from the same institution in 2021.

Niko Mäkitalo, University of Helsinki, Department of Computer Science, Helsinki, Finland

Niko Mäkitalo is a researcher at the University of Helsinki. His primary focus of research has been on novel web technologies, pervasive systems, Fog/Edge computing, and software architectures, focusing on coordinating IoT devices. Lately, Mäkitalo has focused on WebAssembly technology outside the web browser for enabling liquid software behavior. Mäkitalo has a Phd in Computer Science from the Tampere University of Technology.

Tommi Mikkonen, University of Helsinki, Department of Computer Science, Helsinki, Finland

Tommi Mikkonen is a Professor of Software Engineering at the University of Helsinki, Finland. He received his PhD from Tampere University of Technology, Finland. His research interests include Web engineering, IoT, and software architectures.

References

Angular. https://angular.io/. (May 26, 2021).

Blazor |build client web apps with c# |.NET. https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor. (May 26, 2021).

Chrome DevTools protocol. https://chromedevtools.github.io/devtools-protocol/. (May 26, 2021).

Critical rendering path – web performance |MDN. https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path. (Feb 17, 2021).

DOM standard. https://dom.spec.whatwg.org/. (May 26, 2021).

MooTools. https://mootools.net/. (May 26, 2021).

Prototype JavaScript framework: a foundation for ambitious web applications. http://prototypejs.org/. (May 26, 2021).

React – a JavaScript library for building user interfaces. https://reactjs.org/. (May 26, 2021).

Reconciliation – react. https://reactjs.org/docs/reconciliation.html. (Feb 19, 2021).

Render functions & JSX – vue.js. https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM. (May 04, 2021).

Stack overflow jobs. https://stackoverflow.com/jobs. (May 26, 2021).

State of JS 2020: Front-end frameworks. https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/. (May 26, 2021).

Svelte cybernetically enhanced web apps. https://svelte.dev/. (May 26, 2021).

Virtual DOM and internals – react. https://reactjs.org/docs/faq-internals.html. (May 04, 2021).

Vue.js. https://vuejs.org/. (May 26, 2021).

W3techs: Historical yearly trends in the usage statistics of client-side programming languages for websites, April 2021. https://w3techs.com/technologies/history_overview/client_side_language/all/y. (Apr 23, 2021).

W3techs: Historical yearly trends in the usage statistics of javascript libraries for websites, April 2021. https://w3techs.com/technologies/history_overview/javascript_library/all/y. (Apr 23, 2021).

Engineer Bainomugisha, Andoni Lombide Carreton, Tom van Cutsem, Stijn Mostinckx, and Wolfgang de Meuter. A survey on reactive programming. 45(4):1–34.

Philip Bille. A survey on tree edit distance and related problems. 337(1):217–239.

Tom Van Cutsem and Mark S Miller. Proxies: design principles for robust object-oriented intercession APIs. page 14.

Andreas Gizas, Sotiris Christodoulou, and Theodore Papatheodorou. Comparative eval-uation of javascript frameworks. In Proceedings of the 21st International Conference on World Wide Web, WWW ’12 Companion, pages 513–514. Association for Computing Machinery.

John Gossman. Introduction to model/view/ViewModel pattern for building WPF apps. https://docs.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps. (Feb 25, 2021).

Li Tan Hau. Compile svelte in your head (part 1). https://lihautan.com/compile-svelte-in-your-head-part-1/#compile-svelte-in-your-head. (Mar 31, 2021).

JS Foundation js.foundation. jQuery. https://jquery.com/. (May 26, 2021).

Stefan Krause. krausest/js-framework-benchmark. https://github.com/krausest/js-framework-benchmark. (May 26, 2021).

Ali Mesbah and Arie van Deursen. Migrating multi-page web applications to single-page AJAX interfaces. In Proceedings of the 11th European Conference on Software Maintenance and Reengineering, CSMR ’07, pages 181–190. IEEE Computer Society.

Leo A. Meyerovich and Rastislav Bodik. Fast and parallel webpage layout. In Proceedings of the 19th international conference on World wide web, WWW ’10, pages 711–720. Association for Computing Machinery.

Frolin Ocariza, Kartik Bajaj, Karthik Pattabiraman, and Ali Mesbah. An empirical study of client-side JavaScript bugs. In 2013 ACM / IEEE International Symposium on Empirical Software Engineering and Measurement, pages 55–64. ISSN: 1949-3789.

Risto Ollila. A performance comparison of rendering strategies in open source web frontend frameworks. 2021.

Amantia Pano, Daniel Graziotin, and Pekka Abrahamsson. Factors and actors leading to the adoption of a JavaScript framework. 23(6): 3503–3534.

L. D. Paulson. Building rich web applications with ajax. 38(10):14–17. Conference Name: Computer.

Mateusz Pawlik and Nikolaus Augsten. Efficient computation of the tree edit distance. 40(1):1–40.

Antero Taivalsaari, Tommi Mikkonen, Kari Systä, and Cesare Pautasso. Web user interface implementation technologies: An underview:. In Proceedings of the 14th International Conference on Web Information Systems and Technologies, pages 127–136. SCITEPRESS – Science and Technology Publications.

Victor Savkin. Change detection reinvented. https://www.youtube.com/watch?v=jvKGQSFQf10. (Feb 25, 2021).

Zhen Wang, Felix Xiaozhu Lin, Lin Zhong, and Mansoor Chishtie. Why are web browsers slow on smartphones? In Proceedings of the 12th Workshop on Mobile Computing Systems and Applications – HotMobile ’11, page 91. ACM Press.

Published

2022-03-22

How to Cite

Ollila, R. ., Mäkitalo, N. ., & Mikkonen, T. . (2022). Modern Web Frameworks: A Comparison of Rendering Performance. Journal of Web Engineering, 21(03), 789–814. https://doi.org/10.13052/jwe1540-9589.21311

Issue

Section

Articles