Kepiye cara browser ngurai HTML lan ngebuild halaman (jalur rendering penting)?

Question

Accepted Answer

**Jalur rendering penting** yaiku urutan langkah-langkah sing ditindakake browser kanggo ngowahi HTML, CSS, lan JS dadi piksel. Ngerti iku njelasake apa sing ngalangi rendering lan carane nggawe halaman cat luwih cepet. ## Langkah-langkahe ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## Apa sing ngalangi rendering **CSS ngalangi rendering.** Browser ora bakal cat nganti CSSOM siap (kanggo ngindhari kilat konten sing durung dikethok gaya). Dadi CSS gedhe/alon nundur first paint — jaga CSS penting tetep cilik lan inlin-i yen bisa. **Script sinkron ngalangi parser.** ` ``` Luwih parah, script sinkron sing butuh CSSOM (contone maca gaya kompute) nunggu CSS uga — dadi file CSS bisa ora langsung ngalangi script, sing ngalangi parser. ## Carane ngoptimal iku - Iseni CSS ing `` (muat paling ngarep); inlin CSS penting. - Tambah `defer` (utawa `type="module"`) ing script, utawa iseni sadurunge ``. - Cilik lan kompres CSS/JS; busak aturan sing ora dienggo. - Enggo `preload` kanggo font/aset penting, `preconnect` kanggo asal kunci. - Isin layout thrashing (maca/nulis maneh-maneh ing layout ing JS) — iku paksa reflow ekstra. ## Apa sebabe penting Jalur rendering penting nemtokake metrik kaya First Contentful Paint lan Largest Contentful Paint. Ngerti yen CSS ngalangi rendering lan JS sinkron ngalangi parsing ngunegke kowe kahanane yen `defer`/`async`, CSS penting inlin, lan hint sumber cepetake halaman — dheweke pendek utawa buka jalur iki.