Selaimen renderöinnin optimointi

Abstract

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.

The goal of this thesis is to describe how browser rendering engines work from a web developer’s point of view and to demonstrate the performance optimization process of a website. The thesis explains different phases of browser rendering engine actions from parsing the HTML document to rendering elements on the viewport and describes usual performance bottlenecks in style definitions and optimizing them. The optimization processes are explained using the Google Chrome devTools-toolkit.

The thesis also describes important information about rendering engine and its actions, acquiring the target frame rate and optimizing websites with weak performance.

Optimizing rendering engine burdening website animations with CSS3-announced transform: translate-function is demonstrated as a typical optimization example in the thesis. Another example demonstrates the process of optimizing a staticly positioned, rendering engine burdening background image.

Thesis demonstrates Google Chrome devTools-recordings of optimized and unoptimized website actions. The causality of unoptimized style definitions to browser rendering engine performance can be verified analyzing these recordings.