Selaimen renderöinnin optimointi
Hämäläinen, Jaakko (2016)
Hämäläinen, Jaakko
Metropolia Ammattikorkeakoulu
2016
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-201605167924
https://urn.fi/URN:NBN:fi:amk-201605167924
Tiivistelmä
Insinöörityön tavoitteena on kuvata selainten renderöintimoottorien toimintaan web-kehittäjälle kannalta tärkeistä näkökulmista sekä esittää web-sivuston suorituskyvyn optimointiprosessia. Työssä esitellään renderöintimoottorin toimintaa eri vaiheissa HTML-dokumentin tulkitsemisesta elementtien näyttöruudulle renderöintiin. Lisäksi työssä esitel-lään joitain sivuston suorituskyvyn kannalta tyypillisiä pullonkauloja tyylimäärittelyissä sekä kuvataan näiden pullonkaulojen optimointiprosessit. Työssä kuvatut optimointiprosessit on esitetty käyttämällä hyväksi Google Chrome -selaimen devTools-työkaluja.
Insinöörityössä kuvataan modernille web-kehittäjälle tärkeitä tietoja renderöintimoottorin toiminnasta, tavoiteruudunpäivitysnopeuden saavuttamisesta sekä heikosti suoriutuvien sivustojen optimoinnista.
Tyypillisenä optimointiesimerkkinä työssä esitellään renderöintimoottoria kuormittavien animaatioiden optimointi CSS3:ssa esiteltyä transform: translate-funktiota hyväksi käyttäen. Toisenä esimerkkinä esitellään staattisesti asemoidun, renderöintimoottoria kuormittavan, taustakuvan optimointiprosessi.
Insinöörityössä esitellään nauhotteita optimoimattomien ja optimoitujen esimerkkisivusto-jen toiminnasta. Näistä nauhotteista voitiin havaita, miten suuri merkitys tietyillä tyylimäärit-telyillä on sivuston suorituskyvyn näkökulmasta erityisesti vähätehoisilla laitteilla.
Insinöörityössä kuvataan modernille web-kehittäjälle tärkeitä tietoja renderöintimoottorin toiminnasta, tavoiteruudunpäivitysnopeuden saavuttamisesta sekä heikosti suoriutuvien sivustojen optimoinnista.
Tyypillisenä optimointiesimerkkinä työssä esitellään renderöintimoottoria kuormittavien animaatioiden optimointi CSS3:ssa esiteltyä transform: translate-funktiota hyväksi käyttäen. Toisenä esimerkkinä esitellään staattisesti asemoidun, renderöintimoottoria kuormittavan, taustakuvan optimointiprosessi.
Insinöörityössä esitellään nauhotteita optimoimattomien ja optimoitujen esimerkkisivusto-jen toiminnasta. Näistä nauhotteista voitiin havaita, miten suuri merkitys tietyillä tyylimäärit-telyillä on sivuston suorituskyvyn näkökulmasta erityisesti vähätehoisilla laitteilla.