Hogyan jeleníti meg a böngésző az oldalt?

Célok

A lecke végére le tudod írni a megjelenítés lépéseit (DOM, CSSOM, render tree, elrendezés, kirajzolás), meg tudod mondani, miért nem azonos a DOM a képernyőn látható fával, és érted, miért változhat az oldal a „betöltés” után is.

Miért kell ismerni a folyamatot?

A HTTP-válasz megérkezése még nem a kész, látható oldal. Ha a felhasználó azt mondja, „lassú az oldal”, a hiba lehet a hálózatban, a szerverben, de a böngésző feldolgozásában is. Aki ismeri a lépéseket, meg tudja mondani, hol keresse az okot, és érti, miért ugrik el a tartalom egy gombra kattintás közben, vagy miért marad üres az oldal, amíg egy stíluslap meg nem érkezik.

A folyamat egy képen

A hallgató megnyitja a kurzusoldalt. Először megjelenik a cím és a szöveg, egy kép később érkezik, az egyedi betűtípus még később váltja fel az alapértelmezettet. Az oldal tehát nem egyetlen pillanatban készül el.

flowchart LR
    H["HTML érkezik"] --> D["DOM épül"]
    C["CSS érkezik"] --> S["CSSOM épül"]
    D --> R["Render tree"]
    S --> R
    R --> L["Elrendezés (layout)"]
    L --> P["Kirajzolás (paint)"]

Az ábra oktatási egyszerűsítés: a valódi böngészőmotorok párhuzamosan, több részletben dolgoznak, és a JavaScript újabb változásokat indíthat. Az MDN a folyamatot kritikus renderelési útvonalnak (critical rendering path) nevezi.

A lépések

1. DOM építése. A böngésző a HTML-t darabokban elemzi, és felépíti a dokumentumfát (lásd 3.2). A HTML-ből kiderül, milyen további erőforrásra lesz szükség, és ezeket el is kezdheti kérni.
2. CSSOM építése. A CSS feldolgozott, objektumszerű modellje a CSSOM (CSS Object Model). A DOM-mal ellentétben nem épül fokozatosan: az MDN szerint a CSS renderelést blokkoló, a böngésző addig nem rajzol, amíg az összes CSS megérkezett és feldolgozódott. Ezért tud üres vagy rendezetlen lenni egy oldal, amíg a stíluslap késik.
3. Render tree. A DOM és a CSSOM együtt adja a render tree-t, amely csak a látható tartalmat tartalmazza. Egy display: none stílusú elem benne van a DOM-ban, de nincs a render tree-ben.
4. Elrendezés (layout). A böngésző kiszámolja minden látható elem méretét és helyét. Újra lefut, ha a render tree változik vagy a nézetablak mérete módosul.
5. Kirajzolás (paint). A számított elemekből képpontok lesznek. Betöltéskor az egész képernyő kirajzolódik, utána csak a változott részek.

JavaScript és újrarajzolás

A JavaScript módosíthatja a DOM-ot és a stílusokat. Ha a „Részletek megnyitása” gombra kattintva új szöveg jelenik meg, a böngészőnek a változás fajtájától függően újra kell számolnia az elrendezést és/vagy újra kell rajzolnia az érintett részt. Nem minden változás egyformán költséges: egy szöveg hozzáadása, ami az alatta lévő elemeket eltolja, több munkát ad, mint egy színváltozás.

A klasszikus (async/defer nélküli) <script> megállítja a HTML elemzését, amíg le nem töltődik és le nem fut (lásd 3.4). A hosszan futó JavaScript ezért késleltetheti az oldal megjelenését és a felület reakcióját is. Ez nem jelenti, hogy kerülni kell: egy interaktív alkalmazásnak szüksége van rá. A feladat az, hogy értsük a szerepét és a költségét.

Mit jelent az, hogy „betöltött”?

Nincs egyetlen tökéletes „kész” pillanat. A böngésző előbb mutathat használható szöveget, miközben egy kisebb prioritású kép még érkezik. Fordítva is lehet: minden fájl megérkezett, de egy hosszú JavaScript-feladat miatt a felület nem reagál. A felhasználói élmény szempontjából ezért az érzékelt megjelenés és reakció számít, nem csak az utolsó hálózati kérés ideje (lásd 9. és 10. fejezet).

Ha a betűtípus később érkezik, a szöveg mérete és tördelése változhat. Ha egy kép mérete előre nem ismert, a betöltés után az alatta lévő tartalom elmozdulhat. A felhasználónak ez zavaró, különösen, ha éppen egy gombra kattintana. A megoldás az, hogy a képek width és height attribútumot kapjanak, így a böngésző előre helyet foglal (az MDN is javasolja).

Végigvezetett példa: a Kurzuspont kurzusoldala betöltés közben

Idő	Mi látszik?	Miért?
0 ms	Üres lap	Még nem érkezett meg a HTML és a CSS.
első megérkező HTML + CSS után	A cím és a szöveg	A DOM és a CSSOM elkészült, jöhet a render tree, az elrendezés és a kirajzolás.
később	Az oktató fényképe	A kép külön kérés, későn érkezett.
még később	Az új betűtípus	A szöveg átíródik, és az újratördelés elmozdíthatja a gombot.
a program lefutása után	A szűrőmező működik	A JavaScript megérkezett és lefutott.

(Az időpontok szemléltetők, nem mérések.)

Gyakori tévhitek

Állítás	Pontosítás
„A szerver kész képet küld a böngészőnek.”	A böngésző dokumentumot és erőforrásokat dolgoz fel, és maga számolja ki a képet.
„A HTML megérkezésekor minden látható.”	A CSS-re, képekre, betűtípusokra és programokra is szükség lehet.
„A DOM minden eleme látható.”	A display: none elemek nincsenek a render tree-ben.
„A gyors oldal az, amelynek kevés fájlja van.”	A fontos tartalom megjelenése és a felület reakcióideje számít.
„A JavaScript csak a betöltés után fut le.”	A klasszikus script betöltés közben megállítja az elemzést.

Röviden

• A megjelenítés lépései: DOM, CSSOM, render tree, elrendezés, kirajzolás.
• A CSS renderelést blokkoló, ezért az oldal addig nem rajzolódik ki, amíg a stíluslap meg nem érkezik.
• A render tree csak a látható tartalmat tartalmazza.
• A JavaScript változást, újraszámolást és késleltetést okozhat.
• A „betöltött” állapot nem egyetlen pillanat, hanem fokozatos folyamat.

Ellenőrző kérdések

1. Mi a különbség a DOM és a render tree között?
2. Miért blokkolja a CSS a rajzolást?
3. Miért ugorhat el egy gomb a képernyőn, miközben a lap töltődik?
4. Miért nem elég az utolsó hálózati kérés idejét nézni a lassúság megítéléséhez?

Tanulási források

• Critical rendering path (MDN) — a lépések angolul, a CSS blokkoló szerepével.
• <img> elem (MDN) — a width és height szerepe az elmozdulás elkerülésében.