Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
JavaScript DOM Manipulation Performance: Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks
Blekinge Institute of Technology, Faculty of Computing, Department of Computer Science.
2020 (English)Independent thesis Basic level (degree of Bachelor), 10 credits / 15 HE creditsStudent thesis
Abstract [en]

Background. Websites of 2020 are often feature rich and highly interactive applications. JavaScript is a popular programming language for the web, with many frameworks available. A common denominator for highly interactive web applications is the need for efficient methods of manipulating the Document Object Model to enable a solid user experience.

Objectives. This study compares Vanilla JavaScript and the JavaScript frameworks Angular, 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 application size and for comparison tests of DOM performance related metrics using Google Chrome and Firefox.

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 interactive 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.

Place, publisher, year, edition, pages
2020. , p. 40
Keywords [en]
JavaScript, Framework, DOM performance
National Category
Software Engineering
Identifiers
URN: urn:nbn:se:bth-19531OAI: oai:DiVA.org:bth-19531DiVA, id: diva2:1436661
Subject / course
PA1445 Kandidatkurs i Programvaruteknik
Educational program
PAGWE Web Programming
Supervisors
Examiners
Available from: 2020-06-08 Created: 2020-06-08 Last updated: 2020-06-08Bibliographically approved

Open Access in DiVA

JavaScript DOM Manipulation Performance: Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks(575 kB)7595 downloads
File information
File name FULLTEXT01.pdfFile size 575 kBChecksum SHA-512
009abe4707d9c4c645fb7c1a557bf97aeeb0ff57675722c8363e95cc79515200bd5e0f9bb6ee8039b0c8af3f53db3f15a2d65fef61261569a11f577d5ff050c9
Type fulltextMimetype application/pdf

By organisation
Department of Computer Science
Software Engineering

Search outside of DiVA

GoogleGoogle Scholar
Total: 7597 downloads
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

urn-nbn

Altmetric score

urn-nbn
Total: 10583 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf