Hogyan renderel a böngésző? DOM, CSSOM és paint
Mi történik a HTML letöltése után? DOM, CSSOM, layout, paint és compositing vizuális magyarázata.
Röviden
A böngésző nem egyszerűen „kirajzolja a HTML-t”. A beérkező bájtokat feldolgozza, dokumentumfát épít, CSS szabályokat értelmez, meghatározza az elemek méretét és helyét, majd festési és kompozitálási lépésekben képet készít.
Mit jelent a hogyan renderel a böngésző? dom, cssom és paint?
A böngésző nem egyszerűen „kirajzolja a HTML-t”. A beérkező bájtokat feldolgozza, dokumentumfát épít, CSS szabályokat értelmez, meghatározza az elemek méretét és helyét, majd festési és kompozitálási lépésekben képet készít.
Render pipeline
01
HTML/CSS
02
DOM + style
03
Layout
04
Paint
05
Composite
Hogyan működik a gyakorlatban?
A részletek motoronként változhatnak, de fejlesztőként a fontos összefüggés: bizonyos CSS/DOM változások layoutot és paintet okozhatnak, míg más animációk olcsóbban kompozitálhatók. A blokkoló erőforrások pedig késleltethetik az első hasznos renderelést.
- Parsing → DOM/CSS feldolgozás.
- Style calculation → alkalmazandó szabályok.
- Layout → geometria és pozíció.
- Paint/composite → vizuális rétegek és képernyő.
Gyakorlati fejlesztői szemlélet
Performance hibánál ne csak bundle méretet nézz. DevTools performance trace-ben keresd, hogy hálózati várakozás, hosszú JS task, layout vagy paint dominál-e.
Gyakori hibák és félreértések
- Minden DOM módosítást automatikusan teljes újrarendernek gondolni.
- Csak Lighthouse pontszám alapján optimalizálni.
- Layout thrashinget sok egymás utáni mérés és írás közben figyelmen kívül hagyni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy