Rendering av bilder för en SPA-artefakt hos olika JavaScript-ramverk: Jämförelse av laddningstider hos JavaScript-ramverk för rendering av JPEG, PNG och WEBP-filer i en SPA
2025 (Swedish)Independent thesis Basic level (degree of Bachelor), 20 credits / 30 HE credits
Student thesisAlternative title
Rendering images for an SPA artifact with different JavaScript frameworks : Comparison of load times for JavaScript frameworks on rendering JPEG, PNG, and WEBP files in an SPA (English)
Abstract [en]
En Single Page Application är en applikation som enbart utnyttjar en fil för dess strukturella innehåll, det vill säga alla element. Denna typ av webbsida kombineras i studien med stora bildmängder. Bilderna mäts i tre olika format: JPEG, PNG och WEBP, som skiljer sig åt i form av kvalitet, komprimering och syfte. JPEG och WEBP är format med lossy komprimering och mindre filstorlekar, medan PNG är lossless med större filstorlekar och möjlighet till bättre bildkvalitet. Dessa bildformat har valts ut för att mäta hur de presterar i form av laddningstider tillsammans med ett applicerat ramverk. Ramverken väljs ut genom att jämföra dess olika egenskaper som skulle kunna gynna eller hindra utvecklingen av en SPA-artefakt. De som valdes var Angular, Ember.js och Vue.js då dessa passerade de flesta kriterier angående SPA-utveckling och regler från ISO/IEC 25002:2024. Pilotstudien mätte dessa kombinationer i tre olika antal bilder: 36, 72 och 144. Resultaten visade på att Vue.js hade betydligt långsammare laddningstider, men det diskuterades att detta kunde ha skett på grund av installerade tillägg och eventuella orelaterade, parallella processer. Huvudexperimentet inkluderade fler iterationer och bildmängder då denna även inkluderade 18 och 288 antal bilder. Resultaten saknade signifikanta skillnader mellan ramverken, dock finns det tecken på att mer varierade resultat skulle kunna genereras med hjälp av större bildmängder då det finns en skillnad mellan hur ramverkens laddningstider ökar i takt med att fler bilder introduceras.
Place, publisher, year, edition, pages
2025. , p. 87
Keywords [en]
JavaScript, front-end framework, angular, Ember.js, Vue.js, Single Page Application, compression, raster graphics
National Category
Information Systems, Social aspects
Identifiers
URN: urn:nbn:se:his:diva-25304OAI: oai:DiVA.org:his-25304DiVA, id: diva2:1973350
Subject / course
Informationsteknologi
Educational program
Web Developer - Programming
Supervisors
Examiners
2025-06-192025-06-192025-09-29Bibliographically approved