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.
Identifer | oai:union.ndltd.org:UPSALLA1/oai:DiVA.org:kau-95567 |
Date | January 2023 |
Creators | Ybrahim, Christian |
Publisher | Karlstads universitet, Handelshögskolan (from 2013) |
Source Sets | DiVA Archive at Upsalla University |
Language | Swedish |
Detected Language | Swedish |
Type | Student thesis, info:eu-repo/semantics/bachelorThesis, text |
Format | application/pdf |
Rights | info:eu-repo/semantics/openAccess |
Page generated in 0.0019 seconds