Optimizing DOM in Cross-Platform Web Development

Web-sivut ovat kehittyneet staattisista sivukokoelmista kohti dynaamisia JavaScriptillä toimivia web-sovelluksia. DOM-mallin luominen sivusta on olennainen operaatio rakennettaessa HTML- ja CSS-dokumenteista kuvausta web-sivun sisällöstä. Tämä tapahtuu usean operaation seurauksena ja jokainen vaihe luotaessa DOM:ia saattaa aiheuttaa pullonkaulan, joka heikentää sivun toimintaa. Operaation hidastuessa selaimen nopeus vastata käyttäjän pyyntöihin laskee ja käyttäjäkokemus heikkenee. Ongelma korostuu suorituskyvyltään heikommissa laitteissa kuten älypuhelimissa ja tableteissa. Tilastot osoittavat, että internetiä käytetään jo yleisemmin mobiililaitteella kuin perinteisellä työpöytäselaimella. Tämän takia suorituksen optimointiin myös mobiililaitteissa tulee kiinnittää erityistä huomiota. Suorituskykyä ja web-sovellusten toimivuutta yritetään optimoida useilla erilaisilla keinoilla. Tässä työssä on tutkittu millaisia vaikutuksia erilaisilla DOM:in optimointitavoilla on. Erilaiset JavaScript-sovelluskehykset ja -kirjastot ratkaisevat suorituskykyongelmia eri tavoilla ja tämän työn puitteissa vertaillaan tavallisen DOM toteutuksen suorituskykyä suhteessa virtual DOM ja shadow DOM toteutuksiin. Tutkimuksessa toteutettiin kolme web-sovellusta, jotka suorittavat DOM:ia kuormittavia operaatioita luomalla joukon testielementtejä. Elementtien lisäys-, muokkaus- sekä poisto-operaatioiden kestoa vertaillaan erikokoisilla HTML-elementtien testijoukoilla. Vertailut tehtiin kolmella erilaisella laiteella: kannettavalla tietokoneella, tablet-laitteella ja älypuhelimella. Testauksessa käytettiin Chrome-selaimen Developer Tools:in Time Line -työkalua, jolla mitattiin käyttäjän toiminnosta kuluvaa aikaa käyttöliittymän ruudunpäivitysnopeuden normalisoitumiseen operaation päätyttyä. Tuloksista nähdään, että suorituskyvyllä on suuri vaikutus operaatioiden tehokkuuteen erilaisilla laitteilla. Harkitusti tehdyllä toteutusratkaisun valinnalla voi olla suurikin vaikutus suoritusaikaan ja näin ollen myös käyttäjäkokemukseen. Työhön valituista toteutusratkaisuista React ja sen toteuttama virtual DOM suoriutuivat tehokkaimmin kaikilla alustoilla lähes kaikissa toiminnoissa. Varsinaista toteutustapaa valittaessa on kuitenkin tärkeä huomioida ratkaistavan ongelman ympäristö ja pohtia mitkä mahdollisista tehokkuuden pullonkauloista ovat merkittävimpiä. Jokaisella ratkaisulla on omat etunsa, mutta JavaScript-sovelluskehysten ja -kirjastojen yleisenä etuna voidaan pitää parempaa testattavuutta ja yksinkertaisempaa uudelleenkäytettävän koodin luomista.Web pages have evolved from static page collections into dynamic JavaScript powered web applications. Creating a DOM model of the web page is an important operation when creating a web page presentation of HTML and CSS documents. This process consists of multiple operations and every stage introduces a possible performance issue. When this operation slows down, the browser’s ability to correspond to the user’s requests lowers and this directly affects the level of user experience. The problem is more crucial with lower end devices such as smartphones and tablets. Statistics show that using internet with mobile devices has grown to be a bigger trend than traditional use of desktop browser which is why special interest should be paid to mobile performance. There have been attempts to improve the performance and usability of web applications with multiple ways and this thesis concentrates on improving performance of DOM. Various JavaScript frameworks and libraries have presented different solutions for the performance issues and this thesis focuses on three different solutions which are traditional DOM, shadow DOM and virtual DOM. Three web applications that run performance heavy tasks on DOM were created for the purpose of the thesis. The applications generate test elements and the creating, editing and removing operation times are compared. The comparisons are done with laptop, tablet and smart phone. For the testing the Chrome browser’s Time Line tool of the Developer Tools was used. The measured variable was the time from the user operation into the normalization of the frame refresh rate after the operation. From the results, it can be seen that the available performance capacity bears great impact on the efficiency of the operations run on different devices. Well-chosen implementation can greatly affect the run time and this way also the user experience. From the implementations chosen, React and the virtual DOM solution it uses turned out to be the best performing in most of the operations. When choosing the implementation method, it is important to find out the domain and which are the actual points that can cause performance issues. Each of the implemented solutions had its own strengths but in general JavaScript frameworks and libraries can be seen to promote better testability and simpler creation of reusable code