Bagaimanakah pelayar menghuraikan HTML dan membina halaman (critical rendering path)?

Question

Accepted Answer

**Critical rendering path** ialah jujukan langkah yang diambil oleh pelayar untuk menukar HTML, CSS, dan JS menjadi piksel. Memahaminya menjelaskan apa yang menghalang rendering dan bagaimana menjadikan halaman dicat dengan lebih pantas. ## Langkah-langkahnya ```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 yang menghalang rendering **CSS menghalang rendering.** Pelayar tidak akan mengecat sehingga CSSOM sedia (untuk mengelakkan kilatan kandungan tanpa gaya). Jadi CSS yang besar/lambat melengahkan cat pertama — kekalkan CSS kritikal kecil dan masukkannya secara sebaris apabila boleh. **Skrip segerak menghalang penghurai (parser).** ` ``` Lebih teruk lagi, skrip segerak yang memerlukan CSSOM (cth. membaca gaya terkira) turut menunggu CSS — jadi fail CSS boleh menghalang skrip secara tidak langsung, yang seterusnya menghalang penghurai. ## Cara mengoptimumkannya - Letakkan CSS dalam `` (muatkan ia awal); masukkan CSS kritikal secara sebaris. - Tambah `defer` (atau `type="module"`) pada skrip, atau letakkannya sebelum ``. - Kecilkan dan mampatkan CSS/JS; buang peraturan yang tidak digunakan. - Gunakan `preload` untuk fon/aset kritikal, `preconnect` untuk asal usul utama. - Elakkan layout thrashing (baca/tulis layout berulang dalam JS) — ia memaksa reflow tambahan. ## Mengapa ia penting Critical rendering path menentukan metrik seperti First Contentful Paint dan Largest Contentful Paint. Mengetahui bahawa CSS menghalang rendering dan JS segerak menghalang penghuraian memberitahu anda dengan tepat mengapa `defer`/`async`, CSS kritikal yang disebariskan, dan petua sumber mempercepatkan sesebuah halaman — ia memendekkan atau menyahsekat laluan ini.