JavaScript DOM Manipulation Performance Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks

Morgan Persson

28/05/2020

Faculty of Computing, Blekinge Institute of Technology, 371 79 Karlskrona, Sweden This thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfillment of the requirements for the bachelor’s degree in software engineering. The thesis is equivalent to 10 weeks of full-time studies.

Contact Information: Author(s): Morgan Persson E-mail: [email protected]

University advisor: Emil Folino Department of Computer Science

Faculty of Computing Internet : www.bth.se Blekinge Institute of Technology Phone : +46 455 38 50 00 SE–371 79 Karlskrona, Sweden Fax : +46 455 38 50 57 Abstract

Background. of 2020 are often feature rich and highly interactive ap- plications. JavaScript is a popular programming language for the web, with many frameworks available. A common denominator for highly interactive web applica- tions is the need for efficient methods of manipulating the to enable a solid user experience. Objectives. This study compares Vanilla JavaScript and the JavaScript frameworks , React and Vue.js in regards to DOM performance, DOM manipulation methodology and application size. Methods. A literature study was conducted to compare the DOM manipulation methodologies of Vanilla JavaScript and the selected frameworks. An experiment was conducted where test applications was created using Vanilla JavaScript and the selected frameworks. These applications were used as base for comparing applica- tion size and for comparison tests of DOM performance related metrics using and . Results. In regards to DOM manipulation methodology, there is a distinct difference between Vanilla JavaScript and the selected frameworks. In Vanilla JavaScript DOM manipulation is handled by direct interaction with the DOM interface. When using the selected frameworks the actual interaction with the DOM interface is abstracted away from the developer and handled by the framework. While React and Vue.js both have implemented a Virtual DOM to optimize DOM interactions, Angular has implemented Incremental DOM. Vanilla JavaScript had the best DOM performance in all tests and the smallest application size. Amongst the frameworks React had the best DOM performance, Angular performed close to React in nearly all test, and Vue.js was slightly slower in most tests. In nearly all tests the applications performed better in Google Chrome. Conclusions. Vanilla JavaScript and the selected frameworks, and thereby their DOM manipulation methodologies, are all feasible alternatives for creating inter- active web applications with high DOM performance. Tests indicate that Vanilla JavaScript and the selected frameworks achieves better DOM performance in Google Chrome compared to Firefox.

Keywords: JavaScript, Framework, DOM performance Contents

Abstract i

1 Introduction 1 1.1Scope...... 2 1.2 Purpose ...... 2

2 Background 3 2.1 Document Object Model ...... 3 2.2 CSS Object Model ...... 4 2.3 Rendering the HTML document in the Browser ...... 5 2.3.1 Firstrender...... 5 2.3.2 Repaintandreflow...... 6 2.4 Vanilla JavaScript and the selected frameworks ...... 7 2.4.1 Vanilla JavaScript ...... 7 2.4.2 Angular...... 7 2.4.3 React...... 7 2.4.4 Vue.js...... 8

3 Research Questions 9 3.1 RQ 1: How does the DOM manipulation methodology of Vanilla JavaScriptandtheselectedframeworkscompare?...... 9 3.1.1 Motivation ...... 9 3.1.2 Expected Outcome ...... 9 3.2 RQ 2: How does initial page rendering time of Vanilla JavaScript and the frameworks compare using Google Chrome and Firefox? ..... 9 3.2.1 Motivation ...... 9 3.2.2 Expected Outcome ...... 10 3.3 RQ 3: How does Vanilla JavaScript and the frameworks compare when it comes to DOM manipulation performance using Google Chrome and Firefox?...... 10 3.3.1 Motivation ...... 10 3.3.2 Expected Outcome ...... 10 3.4 RQ 4: How does Vanilla JavaScript and the frameworks compare when itcomestoapplicationsize?...... 10 3.4.1 Motivation ...... 10 3.4.2 Expected Outcome ...... 11

ii 4Method 12 4.1LiteratureStudy...... 12 4.2 Empirical Study ...... 12 4.2.1 Experiment design ...... 12 4.2.2 Testcases...... 13 4.2.3 Testscript...... 15 4.2.4 Testapplications...... 15 4.2.5 Deploymentoftestscriptandtestapplications...... 16

5 Results 17 5.1DOMmanipulationmethodologycomparison...... 17 5.1.1 VirtualDOM...... 17 5.1.2 IncrementalDOM...... 18 5.2Performancecomparison...... 18 5.2.1 Initialpagerender...... 18 5.2.2 Create 10000 elements ...... 20 5.2.3 Updateallelements...... 22 5.2.4 Updateeveryotherelement...... 24 5.2.5 Deleteallelements...... 26 5.3Applicationsizecomparison...... 28

6 Analysis and Discussion 31 6.1 RQ 1: How does the DOM manipulation methodology of Vanilla JavaScriptandtheselectedframeworkscompare?...... 31 6.2 RQ 2: How does initial page rendering time of Vanilla JavaScript and the frameworks compare using Google Chrome and Firefox? ..... 32 6.3 RQ 3: How does Vanilla JavaScript and the frameworks compare when it comes to DOM manipulation performance using Google Chrome and Firefox?...... 32 6.4 RQ 4: How does Vanilla JavaScript and the frameworks compare when itcomestoapplicationsize?...... 36 6.5 Results seen from a sustainability and societal perspective ...... 37

7 Validity Threats 38

8 Conclusion 39

9 Future Work 40

References 41

A Empirical study links 47

iii Chapter 1 Introduction

Since its inception in 1995 JavaScript has evolved into one of the fundamental pro- gramming languages for the Web [68, 18]. With the rise in JavaScript usage and popularity the language has gained traction in open-source communities, leading to an abundance of open-source libraries and frameworks being developed over the years [18]. The pace of evolution is high in the current JavaScript framework landscape, where existing frameworks are rapidly evolving and at the same time new frameworks see the light of day each year [2].

For many years the average web page size has increased from year to year [9]. Size increases as websites get more feature rich and interactive. At the same time, per- formance is key to deliver a satisfactory user experience, both in regards of a fast initial page load time as well as timely responding to user interactions with as low perceived waiting time as possible [70]. For a the Page Load Time metric is critical for several reasons. It has a direct impact on user experience [39] and Google statistics shows that 53% of users accessing a website from a mobile device leaves a page that takes longer than three seconds to load [3]. Google has acknowledged that site speed is a parameter in their search ranking algorithms [37, 71]. A significant part of the Page Load Time is the Page Render Time, measuring the amount of time a page render took in the Internet browser [16].

Internet usage has rapidly increased ever since the early 1990s [7], and now more than half of the world population is online [11, 61]. At the same time the Inter- nets environmental impact has increased, and the Internet now is on par with the aviation industry when it comes to CO2 footprint [44, 59]. The share of global elec- tricity usage that can be ascribed to communication technology is expected to reach 21% by year 2030 [1]. As web page sizes increase the metrics Page Load Time and Page Render Time has a larger impact on energy usage on the client side. It also contributes to the digital divide as users with poor internet connection speed might experience problems using the web site and using low-performing or outdated hard- ware can amplify this effect.

With the rapid evolution taking place in the JavaScript front-end framework land- scape comparisons tend to get outdated quickly, and although several JavaScript front-end framework comparisons exists [19] [55], many of them are outdated and does not compare the combination of frameworks and areas for comparison as this study.

1 1.1 Scope

This study compares DOM performance in Vanilla JavaScript and a selection of front-end frameworks using the browsers Google Chrome and Firefox.

IEEE Standard 610[24] defines performance as “The degree to which a system or component accomplishes its designated functions within given constraints, such as speed, accuracy, or memory usage.”. The performance metrics compared in this the- sis are all directly related to speed.

This study compares Vanilla JavaScript and the following front-end frameworks:

•vue.js

• React

• Angular

Comparing other aspects is out of scope of this study, but comparing several other aspects such as functionality, learnability, maintainability and more are important when selecting a JavaScript front-end framework.

The frameworks selected are the three most loved and wanted JavaScript front-end frameworks on the market according to Stack Overflow Developer survey 2019 [56]. The selection of Google Chrome and Firefox was based on their positions as the 2 most popular desktop web browsers[38].

1.2 Purpose

The purpose of this study is to contribute with insights regarding DOM manipula- tion methodology and performance for Vanilla JavaScript and the selected frame- works. Comparing DOM performance in vanilla JavaScript and a selection of front- end frameworks using different Internet browsers will contribute with insights that are especially valuable to organisations operating content-heavy websites where the content is dynamically rendered and updated. It will also contribute to end-users as the comparison extends to using different Internet browsers.

2 Chapter 2 Background

2.1 Document Object Model

A key enabler of interactive websites is the Document Object Model (DOM). The DOM is an API for HTML and XML documents [14, 48]. Conceptually the DOM can be represented as a tree. The DOM tree consists of nodes and objects, origi- nating from the root node (the document itself) child nodes branch out to the structure of the document. The nodes have properties and methods which allows for manipulation of the nodes themselves. Using the DOM programmers can create documents, navigate the documents hierarchy, and modify the content of the docu- ment by adding, removing or updating nodes and content. These modifications can be done using a scripting language such as JavaScript.

(a) HTML document (b) DOM tree

Figure 2.1: Example HTML document represented as a Document Object Model tree

Figure 2.1 depicts how a HTML document can be represented as a Document Object Model tree. The root element of a HTML document is the HTML element. In the example in figure 2.1 the HTML element has 2 children, head and body which in their turns have child elements. For client-side rendered JavaScript applications the common approach is to provide the browser with a bare-bones HTML document

3 with linked JavaScript file/s which handles the rendering of the complete application using the DOM API.

2.2 CSS Object Model

The CSS Object Model is a programming interface for CSS [13] allowing programmers to read and modify CSS styles using JavaScript. The CSS Object Model is created when the browser has finished constructing the Document Object Model. It then parses CSS from all the sources related to the document and creates the CSS Object Model. The CSSOM and DOM are separate data models and are parsed separately, but they share a similar tree-like structures and the purpose of both models is to enable the browser to compute the layout of the document. A document can have multiple CSS sources, and there are multiple types of sources. Examples of different types of sources include CSS embedded in the document using the