Ką išmokote apie naršyklės variklį?

Naršyklės variklis susideda iš kelių pagrindinių komponentų:

• JavaScript variklis — atsakingas už JS kodo analizę ir vykdymą. Pavyzdžiui, V8 Chrome, SpiderMonkey Firefox. Jis kompiliuoja JS į mašininį kodą ir optimizuoja jo vykdymą.

• Renderavimo variklis (layout engine) — atsakingas už HTML ir CSS analizę, DOM ir CSSOM kūrimą, stilių skaičiavimą, layout (elementų išdėstymą) ir puslapio atvaizdavimą. Pavyzdys: Blink Chrome, Gecko Firefox.

• Tinklo sluoksnis — tvarko HTTP užklausas, išteklių (HTML, CSS, JS, paveikslėlių) įkėlimą.

• Saugumas — apima to paties šaltinio politiką (Same-Origin Policy), sandboxing, CORS, apsaugą nuo XSS ir kitų atakų.

Variklio veikla prasideda nuo HTML įkėlimo, DOM kūrimo, tuo pačiu metu įkeliami CSS ir JS. Po DOM ir CSSOM sukūrimo vyksta layout ir paint. JS variklis gali turėti įtakos DOM, todėl kartais vyksta pakartotinis layout.

Paprastas gyvenimo ciklo pavyzdys:

1. HTML įkėlimas ->
2. DOM kūrimas ->
3. CSS įkėlimas ir analizė ->
4. CSSOM kūrimas ->
5. JS vykdymas, kuris gali keisti DOM ->
6. Layout (dydžių ir pozicijų skaičiavimas) ->
7. Paint (braižymas) ->
8. Kompozicija (sluoksnių sujungimas ekrano rodymui)

Taip pat tiriamos optimizacijos, tokios kaip reflow ir repaint minimizavimas, lazy loading, darbo su cache ir asinchroninis išteklių įkėlimas.