Trình duyệt phân tích HTML và dựng trang như thế nào (critical rendering path)?

Question

Accepted Answer

**Critical rendering path** là chuỗi các bước mà trình duyệt thực hiện để biến HTML, CSS, và JS thành pixel. Hiểu nó giải thích cái gì chặn render và làm thế nào để trang vẽ nhanh hơn. ## Các bước ```text 1. Parse HTML → cây DOM (cấu trúc tài liệu) 2. Parse CSS → cây CSSOM (các quy tắc style) 3. DOM + CSSOM → Render tree (các node nhìn thấy + style của chúng) 4. Layout (reflow) → tính hình học của mỗi node (vị trí/kích thước) 5. Paint → tô pixel (màu sắc, văn bản, hình ảnh) 6. Composite → ghép các layer lên màn hình ``` ## Cái gì chặn render **CSS chặn render.** Trình duyệt sẽ không vẽ cho tới khi CSSOM sẵn sàng (để tránh nhấp nháy nội dung chưa được style). Nên CSS lớn/chậm làm trì hoãn lần vẽ đầu tiên — hãy giữ CSS quan trọng nhỏ và inline nó khi có thể. **Script đồng bộ chặn parser.** Một ` ``` Tệ hơn, một script đồng bộ cần CSSOM (ví dụ đọc computed style) còn phải chờ CSS — nên một file CSS có thể gián tiếp chặn một script, mà script lại chặn parser. ## Làm thế nào để tối ưu nó - Đặt CSS trong `` (tải nó sớm); inline CSS quan trọng. - Thêm `defer` (hoặc `type="module"`) cho script, hoặc đặt chúng trước ``. - Minify và nén CSS/JS; bỏ các quy tắc không dùng. - Dùng `preload` cho font/tài sản quan trọng, `preconnect` cho các origin then chốt. - Tránh layout thrashing (đọc/ghi layout lặp đi lặp lại trong JS) — nó ép thêm các reflow. ## Tại sao điều này quan trọng Critical rendering path quyết định các chỉ số như First Contentful Paint và Largest Contentful Paint. Biết rằng CSS chặn render và JS đồng bộ chặn parsing cho bạn biết chính xác tại sao `defer`/`async`, CSS quan trọng được inline, và các resource hint lại tăng tốc một trang — chúng rút ngắn hoặc gỡ tắc đường dẫn này.