Modern Web Frameworks: A Comparison of Rendering Performance
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.
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).
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).
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.
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.
Risto Ollila. A performance comparison of rendering strategies in open source web frontend frameworks. 2021.
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.