Evaluating the performance of web rendering

technologies based on JavaScript: Angular, React,

and Vue
2022 XVLIII Latin American Computer Conference (CLEI) | 978-1-6654-7671-3/22/$31.00 ©2022 IEEE | DOI: 10.1109/CLEI56649.2022.9959901

Raimundo N. V. Diniz-Junior∗ , Caio César L. Figueiredo† , Gilson de S. Russo ‡ , Marcos Roberto G. Bahiense-Junior§ ,
x
Mateus V. L. Arbex ¶ , Lanier M. dos Santosk , Raimundo F. da Rocha∗∗ , Renan R. Bezerra†† , and Felipe T. Giuntini
Sidia R&D Institute
Manaus, Brazil

Email: ∗ {raimundo.junior, † caio.figueiredo, ‡ gilson.russo, § marcos.bahiense, ¶ mateus.arbex, k lanier.santos, ∗∗ raimundo.rocha,

†† renan.bezerra, ‡‡ felipe.giuntini} @sidia.com.

Abstract—The expansion of online services and the increasing and implement rendering techniques, ie. Virtual DOM or
demand for a good experience on the Web have promoted Incremental DOM. Besides, constant updates can overhaul
the emergence of different rendering frameworks based on certain aspects of the whole toolset. Meanwhile, the evolving
JavaScript that assist the agile development and optimize the
application’s performance. This paper presents a methodology to nature of the web also means that obsolescence is a prescient
evaluate web rendering frameworks based on virtual and incre- factor, and the need to follow current trends or update legacy
mental DOM paradigms: Angular, React, and Vue. We conducted features also impacts the choice of the equivalent framework
a study case based on a generic toy application and analyzed the to develop [14], [15].
build size, time to interact, and the DOM manipulation time When we analyze how the frameworks render the HTML,
aspects. Our results show that Vue is 758% faster than React
and 595% compared with Angular in manipulation time. Angular we have two schools of thought: incremental DOM and virtual
occupies 54% more bundle space than Vue and 45% than React. DOM. The virtual DOM (VDOM) is a programming concept
React shows the best time of interactive (300ms), 33% faster than where an ideal representation, or ’virtual’, of the node tree
Vue and 50% than Angular. The experiments can support future is kept in memory and synchronized with the ’real’ DOM by
Web project methodology decisions. a library, like the ReactDOM. This process is called recon-
Index Terms—Web rendering frameworks, incremental and
virtual DOM, front-end, React, Vue, Angular; benchmark, per- ciliation, which is the foundation of the VDOM [13]. When
formance avalution, web development, JavaScript We instantiate Vue, the node tree is called VNODE, working
on a custom logic to prevent unnecessary re-renders [11]. In
I. I NTRODUCTION contrast, in the incremental DOM, which is the technique
that Angular uses, each separate component is compiled in
The growth of the web in the last years allowed observing
order and, after the node tree is mounted on the real DOM,
the advancement of models and frameworks to contribute to
interpreted directly by the browser. Angular also provides an
different fronts and features of web applications development.
additional syntax to apply dynamic values to its components
For example, agile and process improvements methodologies
and update the DOM freely, rendering the new state as the
[1]–[3], global software development challenges [4]–[6], qual-
values are applied [12].
ity and security aspects [7]–[10].
React’s implementation of virtual DOM aims to solve one
Regarding the general support of web development, dif-
of the main problems: the performance hit when rendering
ferent rendering frameworks based on JavaScript have been
HTML components. Since VDOM keeps a virtual node tree
proposed to improve the creation of Single Page Applications-
on memory, it can differentiate when a component should re-
SPAs and facilitate the development of easy-to-use interfaces.
render based on the actual state of the application, impeding
Frameworks like Vue [11], Angular [12] and React [13]
constant and unnecessary DOM updates. This technique is
provides the means to support the process of developing and
efficient for smaller applications due to the memory cost
maintaining multi-platform web apps by enabling multiple
associated with keeping a virtual node tree readily available
APIs for the developers.
on memory can generate a performance debt on complex apps
The comparison between popular frontend rendering frame-
[16].
works is often discussed, especially performance and the
Similar to React, Vue framework uses the same rendering
learning curve. These tools are based on different architectures
technique, based on Virtual DOM, but with an MVVM pattern
This work was partially supported by Samsung Eletrônica da Amazônia architecture (Model, View, View-Model). A difference to be
Ltd., under the stimulus of the Brazilian Informatics Law No. 8.387/91. considered compared to React is how data binding works on

978-1-6654-7671-3/22/$31.00 ©2022 IEEE

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
Vue, React supports one-way data binding, passing properties II. R ELATED W ORKS
from the parent to the child component, while Vue and Angular
allows two-way data-biding, which makes handling application This section presents the related studies about the perfor-
states easier to developers. [11]–[13]. mance comparison of rendering web technologies.
The Angular framework supports a more robust structure, The work [17] performs a comparative analysis between the
focused on the MVC pattern Model, View, Controller, in AngularJS and React JavaScript frameworks in order to define
addition to the fact that by default, the latest versions come the best choice for web application development. The authors
with the Typescript boilerplate [12], [14]. The main difference define AngularJs as a framework capable of creating web
between Angular and the previous frameworks is how Angular applications based on HTML, CSS, and JavaScript using mod-
renders its components. Based on incremental DOM, Angular ularization and dependency injection resources. On the other
provides a syntax to bind the components to the compilation hand, React is defined as a library that facilitates the creation
step (decorators) that creates or updates all components one of interfaces using reusable components. It was pointed out
by one. In this scenario, the real DOM detects new node trees, attributes such as DOM, Learning Curve, packaging, Binding,
compiles each component in a set of instructions, observes any and Templating, among others, to compare the frameworks.
alterations, and then applies it. The idea behind not generating The authors conclude that AngularJS presents a complete
a copy of the tree to compare gives an advantage when structure with resources not present in React; however, with
analyzing the memory consumption. However, since it needs the use of VirtualDOM, React has a better performance.
to compile sequentially, developing a set of instructions for The work [18] makes a comparative analysis between Angu-
every new or old node can impact the speed of any DOM lar, Ember, Knockout, and Backbone. Such a study compares
manipulation [14]. these technologies in terms of internet popularity, bundle
To the best of our knowledge and from what is known in the size, and performance. The most representative framework
scientific literature, the works have focused on (i) descriptive on the internet was Angular, reaching the highest number
comparison of framework characteristics and (ii) performance of searches on the Google platform, with approximately 105
tests in particular contexts with little experimentation data, million results, on Stack Overflow with approximately 252,317
without considering aspects of the iteration time and the queries, on YouTube with about 800,000 views 36,669 stars
bundle size. In addition, there are few scientific works, mostly on GitHub. On the other hand, the minor representation of
gray literature. However, evaluating different frameworks in a internet searches is split into two frameworks. Regarding
generic application can yield more reliable results. Google searches, Ember shows up with approximately 6
Considering this problem and the lack of good experiments million results, considering queries on Stack Overflow, stars
in the literature, this paper aims to evaluate the performance of on GitHub, and views on YouTube Knockout with 19,316,
web rendering technologies based on JavaScript, considering 5,693, and 17,000 results, respectively. Another metric used
the time to interact, the DOM manipulation time, and the in work is the framework’s build size. In this requirement,
bundle size. We look for the principal evaluation metrics in Backbone has generated smaller builds with 6.5KB in contrast
the literature and analyze virtual and incremental DOM by to Ember, which creates builds of 90KB. The Angular bundle
creating a standardized application. We test DOM manipula- reached 39.5KB and the Knockout with 55KB. Furthermore,
tions using three frameworks representing these two rendering a simple structure was proposed regarding performance tests,
techniques: Angular for incremental and React and Vue for printing 500 numbers and comparing the number of operations
virtual. We highlight the main contributions: per second on all four frameworks. The results obtained show
• A methodology to compare incremental and virtual Web Angular reaching 8,732 operations per second, becoming the
rendering frameworks based on JavaScript. fastest one, followed by Backbone with 75.06, Ember with
5.56, and finally Knockout with 1.18 operations per second.
• A comparative case study with Angular, Vue, and React Lastly, the frameworks explored on [18] paper are based on
frameworks. MCV architecture, which provides a readable code, which is
very important when developing complex applications. [18]
• A generic and toy example Web application to support reports negative points of each studied framework related to
benchmark analysis. safety, performance, and documentation.
In [19] the authors conducted a survey about developing
Paper Outline: This paper is organized as follows: The an application which may support undergraduates students,
section II discusses the related works that describe and assigned to a web development course, comparing modern
evaluate the performance of rendering frameworks based on structures and technologies for front-end development, aim-
JavaScript language. Section III presents the methodology with ing to find a proper library or framework to be used for
the evaluation metrics, environment configuration details, and coding. The authors analyze the React, Angular and Vue
the case study. The section IV presents and discusses the frameworks, considering the most download rate technologies
results and comparisons between the web technologies. The according to the 2018 StackOverflow survey, (Angular 36,9%,
section V discuss the takeouts, limitations, future works, and React 27,8%). Besides, the criteria is the component based
conclusions. structure, programming language, modeling, state management

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
approach, data binding, multi-platform support and extensive level, considering processing time and respecting the life cycle
documentation, have been considered. of each framework.
The angular stood out from other frameworks, mainly due In the work [22], the authors point out three main concerns
to the development platform that incorporates the necessary regards the challenges of comparing JavaScript frameworks,
elements to allow the development of applications with a high (i) several choices, (ii) several execution environments, and
level of complexity, in addition to simultaneously allowing its (iii) outdated information. To solve this problem, the au-
scalability, a technical documentation and business support. thors present the JACT, a tool that provides a source code
The authors do not conduct a performance evaluation about comparison feature and facilitates individual understanding
the frameworks, they just compare the public informations and of characteristics related to each framework. JACT tests per-
the documentations about the frameworks. formance measurement at runtime and allows sending tasks
The work [14] makes a comparison between the JavaScript to the source code that uses specific JavaScript Frameworks.
Angular and Vue.js frameworks in order to find the advantages JACT compares aspects related to each framework as (i) task-
and disadvantages of using each framework. For this, two To- based comparison, i.e., the actor can make a comparison
Do list applications were developed, one with Vue. js and based on simple front-end development tasks such as DOM
another with Angular in order to perform the comparisons. A manipulation and AJAX [23]; (ii) source code comparison,
To-do list is an application where the user can register their i.e. the actor can compare the source code for the task’s
activities and mark those that have already been completed. implementation; (iii) runtime performance measurement for
The metrics used for the comparison were: loading, rendering, each selected task source code, i.e., can measure the processing
painting, scripting, system, and idle. The results show that time to finish the task 100 times; (iii) task submission, i.e.,
Vue.js has more performance than Angular, keeping its general the are the option to send the tasks where an author can
average of results between 0 and 1000ms, while Angular was specify which tasks to send by filling a form; and (iv) i.e.,
above 2000ms. Based on the results [14] concludes that Vue.js source code submission, i.e., the framework can adapt itself for
is a recommended framework for beginner programmers and newer versions. The experiment consists of changing the text
small projects, and Angular is ideal for large scalable projects. on a page using three JavaScript frameworks: VanillaJs (Pure
In the work [15], the authors compare Vue and React in JavaScript), jQuery (v3.3,v3.4), and Vue.js (v2.5,v2.6), the
terms of tools complexity, popularity and practice. Since, browsers Google Chrome and Firefox, and the iOs, Android,
both implements the Virtual DOM concept, the benchmark Windows, and Mac OS system devices. The experiment was
considers the performance and architecture of each one. performed 5 times, after that, the mean was calculated.
The test has been conducted implementing a Calculator app The results compared to jQuery show a minimal difference
on both frameworks and evaluating its response time, thus from vanilla. Regarding the browsers, the performance of
Google Chrome Performance tool has been used in order to firefox tends to be higher compared to chrome. The results
collect data. During the tests, there was a slight advantage of shows that Vue.js 2.5 presented the worst performance, up to
React which presented Scripting time of 279ms and Rendering 40 times slower than VanillaJs, on Windows PC and Chrome
time of 6ms while VueJs shows up Scripting time of 336ms environments.
and Rendering time of 9ms. The author [24] show us a perspective related to the use of
However, it’s needed to highlight that, such a tiny difference JavaScript frameworks for the development of mobile appli-
between these frameworks performance is not enough to be cations, comparing hybrid and mobile only apps. Considering
considered, since results may diverge, depending on tests the problem of choosing the best framework for a specific
structure [15]. objective, the paper shows the optimal choices in frameworks
In the work [20], the authors conduct the Benchmark using for native development.
the Lighthouse [21], a Google open-source tool that tests The following criteria was selected for the analysis: Learn-
and evaluates the quality of web apps in terms of perfor- ing curve, documentation, development cost, emulators and
mance, accessibility, good practices, and SEO Search Engine debugging, response time and speed, market value, code
Optmization. They conduct the tests in two ’ToDo’ Single reuse and teamwork, maintenance and updates. The author
Page Applications based on Angular and Svelt frameworks did simple tests as the installation and creation for small
and in mobile and desktop environments, using an aggregate components for the analysis, basing on the criteria mentioned
score provided by the Lighthouse tool. The results show that previously, where the results were presented on the Likert’s
Svelte received 98 as the score in a mobile environment while scale, varying from 1 to 5. Analyzing the results, the authors
Angular scored 90 points. Svelte received the maximum score conclude that hybrid solutions are closer to native in relation
in a desktop environment while Angular scored 90 points, all to the runtime speed requirements and content rendering. The
conducting the same tests. Therefore, based on Lighthouse’s paper [24] highlights hybrid solution as the best choice for
results, [20] point out that the Svelt advantage over Angular, MVP Minimum Viable Product, as it is a simple version with
regarding the mentioned parameters. Compared to this current minimal development.
paper, it is possible to highlight the number of metrics used In our paper, we bring some comparisons applying similar
to define the research results and the use of the Lighthouse metrics in addition of other items such as TTI and bundle size.
tool. Also, a benchmark was performed for testing at the code Some of the related works cited, such as [17] and [19], don’t

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
use a standardized application to compare the frameworks, lifecycle also means a shorter rendering time. We
these papers just discuss the main descriptions related with considered the time measurement between the initial
each framework. state and when the framework calls its equivalent
For a better understanding of these Frameworks, a table hook after the component updates. On React, we
has been provided TABLE I, showing applications, created have both methods componentWillMount(),
by their respective authors, for evaluating topics such as life and componentDidUpdate(), called before
cycle, scripting, rendering, description and system. the component binds to the DOM and after the
states changes, respectively. Inside Angular, we have
III. M ETHODOLOGY ngAfterContentInit(), which fires after the child
In this section, we present our methodology to benchmark content is loaded, and ngAfterViewChecked(),
the frameworks mentioned previously. We conduct a perfor- which fires after the change detection checks the
mance evaluation consisting of functions: create, edit, and template for changes. Contents refer to external
delete certain quantity of elements on the browser’s window, components projected on the current component, while
following the lifecycle (The framework’s function controlling view refers to the template rendering. For Vue, we
the states of an application) proposed by each framework and have beforeCreate(), called when the instance
library. finishes the properties resolution but before processing
the bound data, and the onUpdated() signals when
A. Evaluation metrics DOM processing ends. This metric demonstrates the
We apply the following evaluation metrics to conduct the most effective framework for manipulating the DOM.
performance analysis of Vue, Angular, and React Web ren-
dering frameworks. The metrics were chosen considering the B. Configuration environment and Technologies
development of applications and the use perspective. We conduct the performance evaluation experiments with
1) Build bundle size: The application bundle is the web- Angular, React, and Vue frameworks. For the benchmark
optimized production build created from each frame- environment, we utilized a desktop with Intel Xeon E-224G
work’s build tools. Their toolsets result in an HTML 3.50GHZ CPU, 32GB RAM, and Ubuntu 20.04.3LTS. Be-
file and a web-packed minified JavaScript file, ready for sides, we use the following tools: Docker v20.10.12 [26],
production deployment. For the native JavaScript, we NodeJS 14.18.2 [27], Nginx 1.21.6 [28], and Selenium-web
utilized a static HTML file that encapsulates the equiv- driver 4.1.1 [29]. An application was developed for each
alent script, containing the functions we wrote for the framework to validate the case study and collect data as the
frameworks. The bundle was collected by creating the foundation for testing.
production build for each framework and then checking We implement the tests inside the docker container using the
the size by analyzing the file’s properties. The smaller production build of each framework. The Nginx tool allows
the file, the faster the download and the fewer elements a proxy instance to serve the web applications. The docker
for the browser to analyze. [12] [13] [11] . image for the testing environment contained only the OS
2) Time to Interactive: The Time to Interactive (TtI) is System and its initial configurations, the node installation, and
defined as the period between when the last long task the Node Packet Manager (NPM). All tests occurred on the
(task longer than 50ms) finishes and the quiet window same machine using the same procedure.
starts (usually a period of inactivity of at least 5 seconds) C. Evaluation Procedures
[25]. The TtI is a metric to give an overview of when
is ready to accept interaction after DOM manipulation Both React and Vue use virtual DOM as their essential ren-
from the user’s perspective as the main thread is not dering technique. Alternatively, Angular uses the incremental
blocked. The lower the tti, the faster the application is DOM technique. Therefore, we defined a standard structure
available for user interaction. To evaluate, we utilize the composed of basic HTML tags. We defined four main DOM
Lighthouse tool, which automate and returns a collection manipulation functions: create, edit one, edit all, and delete
of metrics to score a web page based on a rank. all. These functions are bound to the button nodes to create
a list of HTML elements to attach as a child node on the
LT T − QW T = T tI HTML body, edit a component inside the created list, modify
all existing elements inside the list, and remove all HTML
LTT is the time after the final long task finishes and the nodes of the list.
QWT is the time when a 5 second of idle window starts. All the mentioned frameworks have an initial reactive state
The interval between them is the Time to Interactive. for when the component is available after being attached to
3) DOM Manipulation time: Each framework has its DOM mounted. This state is observed by the lifecycle and
native lifecycle hook, separating the process of creating, reacts to every change. We store the execution time when
updating, and destroying a component into distinct the DOM manipulation method is fired at the lifecycle hooks
methods while providing the means to implement and after the state change function is called. The difference
custom logic for manipulating the DOM tree. A faster between those times is logged.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
 TABLE I
S UMMARY OF RELATED WORKS

Study Framework DOM Type ITT Bundle Description Performance Application Context
[14] Angular / Vue Incremental/Virtual X X Web - To Do List APP
[15] React / Vue Virtual X X Web - Calculator APP
[17] Angular / React Incremental/Virtual X Web - No Aplication
[18] Angular / Ember / Knockout / Backbone Incremental X X Web - No Aplication
[19] React / Angular / Vue Incremental/Virtual X Web - Blueprint of educational
[20] Angular / Svelte Incremental X X Web - TODO APP
[22] JavaScript / jQuery / Vue.js Incremental X X Web - Jact
Our Evaluation Angular / Vue / React / Vanilla Incremental/Virtual X X X X Web - Render APP List

For testing purposes, a Selenium [30], [31] script was devel-

oped for automation purposes to make 36 individual attempts
for each DOM manipulation function described before and
using three different sample sizes: 1000, 10000, and 50000
HTML elements. Each attempt was made inside our Docker
container, using an nginx image to set up the environment,
containing the production build for each framework. After each
attempt, the selenium writes the logs to a file, in which we
extract the average time individually.
For TtI, we applied the Lighthouse tool [21] provided by the
Chrome browser, in which we continuously tested first-page
load on the default state of the application for each separated
framework. We extracted the resulting JavaScript artifacts from
each framework build production tool for the build size bundle.
Fig. 1. Pie chart the represents the build size bundle for each framework and
the HTML file for the vanilla JavaScript.

B. Time to interactive
IV. R ESULTS
As shown in chart 2, the results for TtI were close, spanning
the frameworks. Since the application does not have any
dynamic loading or API call, the first-page load is not as
extensive as some Web applications and provides a natural fast
In this section, we describe the results based on the methods TtI. As for the highlights, React presents the fastest result,
detailed on section III. having the lowest time of 0.3s, coming as fast and lower
than the native JavaScript. In contrast, Angular has the highest
time compared to the other results, becoming ready for user
interaction in 0.6s. Vue does present a similar result to native
JavaScript, having the same approximated time of 0.4s.

A. Build bundle size

C. DOM manipulation time

The bundle size generates after the build is essential for a The chart 3 represents the results of the test attempts when
lightweight application. As noted in figure 1, the framework manipulating 1.000 simultaneous HTML elements. With this
with the most extensive bundle is Angular with 196.608 bytes, scenario in mind, we can highlight Vue as the framework with
followed by React with 135.168 bytes and Vue with 126.976 the lowest creating time compared to the other frameworks,
bytes. In this context, the Vue library stands out as the lightest losing only to vanilla JavaScript. On to DOM updates, the
build size, meaning less time to download the bundle when incremental DOM shows a better result, having the lowest
requested by the page. Angular has the highest bundle size time in editing one element and editing all, compared to the
due to its innate structure that follows a more standard MVC virtual DOM frameworks. React, and Vue have lower times
pattern, while React and Vue are focused on being freeform than Angular on deletion, which sits above 4 ms for deleting
and lightweight [11]–[13]. all the elements created.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
Fig. 2. Bar chart that represents the TtI results between the frameworks and Fig. 4. Test attempts with 10.000 rendered elements.
the native JavaScript.

Besides, the test attempts with 50.000 elements (figure 5)

are the most taxing since the element load severely impacts the
performance overall. Vue shows a consistent time concerning
its previous attempts, having the lowest creation and deletion
time while maintaining a solid editing time. Again, React
takes the longest to create the 50.000 elements with 5165ms,
and Angular takes 4043ms to delete all while maintaining the
lowest update time. Comparing React and Angular shows they
both have strengths and weaknesses on opposite functions,
while Vue maintains a solid time across all functions, similar
to native JavaScript.

Fig. 3. Test attempts with 1.000 rendered elements.

With 10.000 simultaneous elements, represented in figure

4, it is possible to highlight two recurring cases through the
tests. The first happens when attempting the create function in
the React application. It stands out as the highest value among
the others, measuring at 254.10ms on average. Although the
highest time happens with React, the lowest also happens Fig. 5. Test attempts with 50.000 rendered elements.
with a virtual DOM framework, with 36.5ms on average for
Vue. The other recurring case is with deleting all elements
on Angular, given its exceptionally high time. Angular, on The overview in figure 6 shows us the aggregation of all
average, takes 195.2ms to complete the removal cycle of test results. As mentioned previously, times are similar in
all elements. It is important to note that Angular also has most cases, save for two exceptions. Mostly, results scaled
better performance in updating DOM elements. For the vanilla as expected, and it was apparent that increasing the element
JavaScript, the times average is the same across all functions. count had different impacts depending on the framework.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
 TABLE III
T IME PERFORMANCE OF EDIT FUNCTION

1000 10000 50000 Total

Angular 3,6 29,8 61,0 94,4

React 7,8 51,7 179,4 239,0
Vue 9,7 55,6 267,9 333,3
Vanilla 3,2 34,7 203,8 241,7

Finally, the results provided by this section pointed out

that regarding the performance of the frameworks, in terms
of DOM manipulation time at the highest element count, Vue
was 758% faster than React and 595% compared with Angular.
Concerning the build size it is possible verify that Angular
occupies a larger bundle space by 54% compared to Vue and
45% with React. In relation to time to interactive the React
shows a time of 300ms, faster than Vue and Angular by 33%
and 50% respectively.
Fig. 6. Overview of the test attempts. So, based on the results, we recommend Vue for general
use in applications that demands heavy DOM manipulation,
especially when removing and creating elements. For Angular,
we recommend using for applications that needs to constantly
update DOM elements. For React, we recommend for appli-
It is worth noting that since vanilla is pure JavaScript, it cations that need lighter and interactive environments.
is expected to show superior performance in every attempt.
On the other hand, developing using only pure JavaScript V. C ONCLUSIONS
may be costly since the framework’s primary purpose is to In this paper, we presented a performance evaluation be-
streamline the process of creating an application. On the tween distinct frameworks for rendering HTML elements on
table II we can observe the results considering the response the DOM, one of them being the virtual DOM and the
time of adopted frameworks. Vue and react, due to usage incremental DOM, implemented by frameworks like React,
of Virtual DOM strategy, presented the best execution time, Vue, and Angular. Data such as HTML elements rendering
considering obtained results on creation and deletion scenarios, time, time to interact, and build bundle size were collected. An
Vue performed 90% and React 20% faster than Angular, application web was developed for each mentioned framework
regarding creation and deletion methods. and a native JavaScript as a base parameter for comparison.
With equivalent implementations and respecting the rules of
the lifecycles, determining the end of operations, we extracted
the metrics detailed in section III from the developed web
TABLE II
T IME PERFORMANCE OF CREATE AND DELETE FUNCTION
applications.
The results show that React had difficulties creating the
1000 10000 50000 Total elements to the DOM since Angular and Vue average around
270-290ms while React is above 5000ms. Both are based on
Angular 14,3 261,9 4337,9 5544,9
virtual DOM and had different results. Nonetheless, we can see
React 15,3 275,05 5255,6 4615,1 that Angular, with its implementation of incremental DOM,
Vue 8,35 55,9 364,9 429,1 showed us similar results when creating elements compared
Vanilla 3,2 35,1 205,4 243,7 to Vue frameworks, averaging a difference of about 20ms
on 50,000 elements and in editing values inside the DOM
scenarios, Angular had the best performance. In light of that,
it is possible to see the main advantage against VDOM or
VNodes: To update nodes without the need of an intermediary
In terms of editing functions, when there’s a rendered to match the elements in memory.
element on the screen, as Angular applies incremental DOM In assessing the data extracted, we conclude that the solution
edition strategy, it can manipulate the existing elements in proposed by the virtual DOM implemented inside the Vue
a more performative way, such as Angular presented itself framework had a slight advantage overall, having a good
60% faster, related with React and 71% related with Vue, as performance in every function and maintaining peaks under
exhibited on III. the 1s mark in the largest sample size.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
 It is worth mentioning that our test scenario is based on the experience,” in 2021 2nd Asia Service Sciences and Software
standard version of the selected frameworks without the use of Engineering Conference, ser. ASSE ’21. New York, NY, USA:
Association for Computing Machinery, 2021, p. 41–47. [Online].
third-party libraries or modules that can assist in the rendering Available: https://doi.org/10.1145/3456126.3456144
process when dealing with a massive load of HTML elements, [7] M. Bruno, P. Ibañez, T. Techera, D. Calegari, and G. Betarte, “Exploring
such as clustering the elements together, rendering only visible the application of process mining techniques to improve web application
security,” in 2021 XLVII Latin American Computing Conference (CLEI),
elements (Virtual lists), or pagination. These methods were 2021, pp. 1–10.
not used to provide a benchmark environment where we have [8] P. Matsubara, I. Steinmacher, J. Maldonado, B. Gadelha, and T. Conte,
a constant and stressful rendering scenario. All frameworks Trust Yourself! Or Maybe Not: Factors Related to Overconfidence and
Uncertainty Assessments of Software Effort Estimates. New York,
involved have their characteristics inside their core rendering, NY, USA: Association for Computing Machinery, 2021, p. 452–461.
control layers, structure, and lifecycles, which may impact the [Online]. Available: https://doi.org/10.1145/3474624.3474643
HTML rendering directly. [9] D. A. da Silva and W. M. Watanabe, “Cross-browser incompatibilities
classification layout: A comparative study between different models,” in
The results (section IV) give a perspective on the behavior 2021 XLVII Latin American Computing Conference (CLEI), 2021, pp.
of the solutions in our test scenario. 1–10.
We highlight the main contributions: [10] S. a. Santos, B. Silveira, V. Durelli, R. Durelli, S. Souza, and
M. Delamaro, On Using Decision Tree Coverage Criteria For Testing
• We develop a methodology to compare different Web Machine Learning Models. New York, NY, USA: Association
render frameworks based on JavaScript ( incremental and for Computing Machinery, 2021, p. 1–9. [Online]. Available:
https://doi.org/10.1145/3482909.3482911
virtual), observing the main metrics in the literature. [11] Vuejs.Org. (2022) Nodes, trees, and the virtual dom. Acessed in 02 feb.
• We provide a comparative case study with Angular, 2022. [Online]. Available: https:vuejs.org/v2/guide/render-function.html
Vue, and React frameworks using a non-vies application, [12] M. License, “Angular applications: The essentials,” 2022, acessed in
02 feb. 2022. [Online]. Available: https:ioguidewhat-is-angular
supporting the project’s decision of technology choice by [13] R. Org.
companies and developers. [14] O. C. Novac, D. E. Madar, C. M. Novac, G. Bujdosó, M. Oproescu,
• We provide a standalone Web application to support new and T. Gal, “Comparative study of some applications made in the
angular and vue.js frameworks,” in 2021 16th International Conference
benchmark analysis. on Engineering of Modern Electric Systems - EMES, 2021, pp. 1–4.
As future works we envision: [15] C. M. Novac, O. C. Novac, R. M. Sferle, M. I. Gordan, G. BUJDOSó,
and C. M. Dindelegan, “Comparative study of some applications made
• Develop new metrics based on formal computing studies in the vue.js and react.js frameworks,” in 2021 16th International
to support the Web performance test area. Conference on Engineering of Modern Electric Systems (EMES), 2021,
• Explore performance testing in large-scale project envi- pp. 1–4.
[16] “Performance optimization techniques for reactjs,” in 2019 IEEE In-
ronments. ternational Conference on Electrical, Computer and Communication
• Develop intelligent mechanisms that data about software Technologies (ICECCT), 2019, pp. 1–5.
requirements support technology choice. [17] A. Kumar and R. K. Singh, “Comparative analysis of angularjs and
reactjs,” International Journal of Latest Trends in Engineering and
• Check mechanisms to provide optimizations in pre- Technology, vol. 7, no. 4, pp. 225–227, 2016.
existing software. [18] S. Delcev and D. Draskovic, “Modern javascript frameworks: A survey
• Study of JavaScript frameworks directed to the develop- study,” in 2018 Zooming Innovation in Consumer Technologies Confer-
ence (ZINC), 2018, pp. 106–109.
ment of the mobile applications. [19] S. Ivanova and G. Georgiev, “Using modern web frameworks when
developing an education application: a practical approach,” in 2019
R EFERENCES 42nd International Convention on Information and Communication
[1] A. F. Cruz, C. P. Godoy, L. M. Santos, L. F. Marinho, M. S. Jardim, E. P. Technology, Electronics and Microelectronics (MIPRO), 2019, pp. 1485–
Silva, C. A. L. Pahins, P. Fonseca, and F. T. Giuntini, “Blueprint model: 1491.
An agile-oriented methodology for tackling global software development [20] T.-D. Tripon, G. Adela Gabor, and E. Valentina Moisi, “Angular and
challenges,” Advances in Science, Technology and Engineering Systems svelte frameworks: a comparative analysis,” in 2021 16th International
Journal, vol. 5, pp. 353–362, 2020. Conference on Engineering of Modern Electric Systems (EMES), 2021,
[2] Y. Zheng, Y. Liu, X. Xie, Y. Liu, L. Ma, J. Hao, and Y. Liu, “Automatic pp. 1–4.
web testing using curiosity-driven reinforcement learning,” in 2021 [21] Google Developers, “Lighthouse,” 2022, accessed 28 mar. 2022.
IEEE/ACM 43rd International Conference on Software Engineering [Online]. Available: https://developers.google.com/web/tools/lighthouse
(ICSE), 2021, pp. 423–435. [22] N. Nakajima, S. Matsumoto, and S. Kusumoto, “Jact: A playground
[3] S. C. Fonseca, M. C. Lucena, T. M. Reis, P. F. Cabral, W. A. Silva, tool for comparison of javascript frameworks,” in 2019 26th Asia-Pacific
F. de S. Santos, F. T. Giuntini, and J. Sales, “Automatically deciding on Software Engineering Conference (APSEC), 2019, pp. 474–481.
the integration of commits based on their descriptions,” in 2021 36th [23] C. Q. Adamsen, A. Møller, S. Alimadadi, and F. Tip, “Practical
IEEE/ACM International Conference on Automated Software Engineer- ajax race detection for javascript web applications,” in Proceedings
ing (ASE), 2021, pp. 1131–1135. of the 2018 26th ACM Joint Meeting on European Software
[4] W. Moreno, P. Afonso, and H. Costa, “Challenges and solutions of Engineering Conference and Symposium on the Foundations of
project management in distributed software development,” in 2019 XLV Software Engineering, ser. ESEC/FSE 2018. New York, NY, USA:
Latin American Computing Conference (CLEI), 2019, pp. 1–10. Association for Computing Machinery, 2018, p. 38–48. [Online].
[5] F. Santos, J. Sales, F. Giuntini, and C. Godoy, “A preliminary analysis Available: https://doi.org/10.1145/3236024.3236038
of communication preferences in a global software development [24] H. Brito, A. Gomes, Santos, and J. Bernardino, “Javascript in mobile
environment,” in The 39th ACM International Conference on Design of applications: React native vs ionic vs nativescript vs native develop-
Communication, ser. SIGDOC ’21. New York, NY, USA: Association ment,” in 2018 13th Iberian Conference on Information Systems and
for Computing Machinery, 2021, p. 357–358. [Online]. Available: Technologies (CISTI), 2018, pp. 1–6.
https://doi.org/10.1145/3472714.3473908 [25] M. Corporation, “Mdn web docs glossary: Definitions of web-
[6] A. O. Penha-Junior, C. E. De Souza, G. M. Souza, J. S. Araujo, related terms,” 2022, acessed in 21 march 2022. [Online]. Available:
J. I. B. Vilarouca-Filho, L. M. Barroso, R. j. B. Fernandes, P. C. R. https://developer.mozilla.org/en-US/docs/Glossary
Fonseca, and F. T. Giuntini, “Challenges in the development of a
global software user interface by multicultural teams: An industrial

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.
[26] D. Inc., “Docker engine release notes,” 2022, accessed in 21 [30] I. Santos, J. C. C. Filho, and S. R. S. Souza, “A survey on the practices
march 2022. [Online]. Available: https://docs.docker.com/engine/release- of mobile application testing,” in 2020 XLVI Latin American Computing
notes/201012 Conference (CLEI), 2020, pp. 232–241.
[27] O. Foundation, “Releases,” 2022, accessed in 21 march 2022. [Online]. [31] K. Sawant, R. Tiwari, S. Vyas, P. Sharma, A. Anand, and S. Soni,
Available: https://nodejs.org/en/about/releases/ “Implementation of selenium automation amp; report generation using
[28] F. Inc., “Releases,” 2022, accessed in 21 march 2022. [Online]. selenium web driver amp; atf,” in 2021 International Conference on
Available: https://docs.nginx.com/nginx/releases/ Advances in Electrical, Computing, Communication and Sustainable
[29] SeleniumHQ, “Releases,” 2022, accessed in 21 march 2022. [Online]. Technologies (ICAECT), 2021, pp. 1–6.
Available: https://www.selenium.dev/downloads/

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:04:25 UTC from IEEE Xplore. Restrictions apply.