Critical rendering path là chuỗi bước trình duyệt chạy để biến HTML, CSS và JS thành pixel trên màn hình. Bất cứ thứ gì phải hoàn thành trước lần paint đầu tiên đều là render-blocking (chặn render).
Critical rendering path là chuỗi bước trình duyệt chạy để biến HTML, CSS và JS thành pixel trên màn hình. Bất cứ thứ gì phải hoàn thành trước lần paint đầu tiên đều là render-blocking (chặn render).
<script> thường sẽ dừng việc parse HTML trong khi nó tải và chạy.<!-- Chặn parsing: trình duyệt đợi ở đây rồi mới đi tiếp -->
<script src="/app.js"></script>
<!-- defer: tải song song, chạy sau khi HTML parse xong, theo thứ tự -->
<script src="/app.js" defer></script>
<!-- async: tải song song, chạy ngay khi sẵn sàng (không đảm bảo thứ tự) -->
<script src="/analytics.js" async></script>
Dùng defer cho code app đụng vào DOM, và async cho script độc lập như analytics. Inline phần CSS quan trọng và tải phần còn lại mà không chặn.
Đây là mô hình tư duy đằng sau hầu hết mọi cách sửa thời gian tải: CSS/JS render-blocking là nguyên nhân hàng đầu gây first paint chậm và LCP kém. Hiểu vì sao có defer/async cho thấy bạn hiểu trình duyệt, không chỉ thuộc cú pháp.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ