DOM benchmark comparison of the front-end JavaScript frameworks React, Angular, Vue, and Svelte

One of the most used tools for creating interactive, advanced, and easily maintainable websites in 2020 is the programming language JavaScript. Over the last decade, many front-end frameworks have been built on top of JavaScript, which makes creation, design, and maintenance of interactive websites easier. As of 2020, the most popular front-end JavaScript frameworks were, by a large margin, React and Vue, followed by Angular. A relatively new framework called Svelte was also gaining in popularity and raised developer interest. This study will evaluate the performance of these front-end JavaScript frameworks. The criteria for evaluation are primarily based on speed of completing certain operations related to DOM elements in the web browser, such as DOM element addition, editing, and removal. Non-technical evaluation points include differences in architecture, development experience, popularity, maturity, and availability. To set the context for the study of these frameworks, the study begins with an outline of the history and development of JavaScript. Its current status and versions are also described. Surrounding technologies relevant to the study are presented, such as DOM and HTML. Following this, the key features of front-end JavaScript frameworks are investigated, and the development setup process for a generic framework is documented. The criteria for selecting frameworks for evaluation is presented, and the four selected front-end frameworks are then investigated and evaluated. A benchmark JavaScript application is described and created for each of the frameworks. With this reference application, a number of technical benchmarks are performed, where the frameworks are rated according to how well they perform various DOM data updates. Finally, a recommendation is made on which frameworks are best suited for use, and how the future landscape of front-end JavaScript frameworks is likely to develop