Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • apa.csl
  • 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
Prestandajämförelse av Angular, React och Vue.js: En komparativ studie av JavaScriptbiblioteket React och ramverken Vue och Angular ur ett prestandaperspektiv i webbläsarna Google Chrome, Microsoft Edge och Mozilla Firefox
Karlstad University, Faculty of Arts and Social Sciences (starting 2013), Karlstad Business School (from 2013).
2023 (Swedish)Independent thesis Basic level (degree of Bachelor), 10 credits / 15 HE creditsStudent thesisAlternative title
Performance comparison of Angular, React and Vue : A comparative study of the JavaScript library React, and the frameworks Vue and Angular from a performance perspective in the browsers Google Chrome, Microsoft Edge, and Mozilla Firefox (English)
Abstract [sv]

Långa laddningstider eller bristfällig prestanda kan ha en negativ effekt på användarupplevelsen av en webbsida. Utvecklare kan ta hänsyn till detta vid skapande av ett system genom valet av ramverk, men eftersom det finns ett brett utbud av JavaScript ramverk, som är ett av de mest populära programmeringsspråken, kan det bli en utmaning. Syftet med arbetet är att med hjälp av olika tester och testermetoder jämföra prestandan mellan JavaScript ramverken Angular, React och Vue för att hjälpa utvecklare att välja ramverk. Testerna som ramverken genomförde var rendering av bilder och videor samt skapande, uppdaterande och borttagande av 1 000/50 000 DOM element i webbläsarna Google Chrome, Microsoft Edge och Mozilla Firefox för att samla in kvantitativa data. Verktyget WebPageTest användes för att mäta prestandan vid rendering av bilder och videor. Tidsstämplarna performance.now() och Date.now() användes för att mäta tiden det tog att utföra DOM manipulationer i millisekunder.

 

Resultatet för ramverken lades in i tabeller och en poängskala skapades för att räkna ut vilket ramverk som var mest effektivt. React presterade bäst vid rendering av bilder och videor med 53 poäng, Vue resulterade i 37 poäng och Angular 5 poäng. Vid DOM manipulering var Vue mest effektiv och tilldelades 42 poäng, Angular fick 32 poäng och React 14 poäng. För att ta reda på vilket av ramverken som generellt var effektivast summerades poängen för båda testerna och resulterade i att Vue totalt presterade bäst med 79 poäng, React hamnade på andra plats med 67 poäng och Angular sist med 37 poäng. React och Vue hade små marginaler mellan varandra i resultatet vid rendering av bilder och videor vilket gör till ett passande ramverk för webbsidor som kräver regelbunden DOM manipulering och som innefattar bilder och videor. Angular presterade bäst vid skapande och uppdatering av 50 000 element i alla webbläsare samt uppdatering av 1 000 element i Google Chrome och Mozilla Firefox. React var minst effektiv vid skapande och uppdatering av element, men presterade bäst vid borttagning av 50 000 element i Google Chrome och Microsoft Edge.

Place, publisher, year, edition, pages
2023. , p. 78
Keywords [sv]
Angular, React, Vue, JavaScript, Prestanda, Rendering, WebPageTest, Performance.now(), Date.now(), DOM
National Category
Information Systems
Identifiers
URN: urn:nbn:se:kau:diva-95567Local ID: 1073OAI: oai:DiVA.org:kau-95567DiVA, id: diva2:1772190
Subject / course
Information Systems
Educational program
Study Programme in IT design, 180 hp
Supervisors
Examiners
Available from: 2023-07-04 Created: 2023-06-21 Last updated: 2023-07-04Bibliographically approved

Open Access in DiVA

fulltext(1447 kB)31 downloads
File information
File name FULLTEXT01.pdfFile size 1447 kBChecksum SHA-512
927beb05d7f2bd4597f8203175dc262d3fd0570a219d677447fcb26c0ea8bab9472ed035c08d59a1f56e88a4f7a3817106198db1f2135a9028c6cdcef9651261
Type fulltextMimetype application/pdf

By organisation
Karlstad Business School (from 2013)
Information Systems

Search outside of DiVA

GoogleGoogle Scholar
Total: 31 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: 122 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • apa.csl
  • 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