Điều gì xảy ra khi trình duyệt render một trang? (critical rendering path, reflow/repaint)

Critical rendering path — chuỗi bước biến HTML/CSS/JS thành pixel:

1. Parse HTML → DOM tree.
2. Parse CSS → CSSOM tree (CSS chặn render).
3. DOM + CSSOM → render tree (chỉ node hiển thị).
4. Layout / reflow: tính vị trí + kích thước từng node.
5. Paint: tô màu, chữ, ảnh, viền thành các layer.
6. Composite: ghép layer ra màn hình.

Sau đó, thay đổi động gây:
- Reflow (layout): đổi thứ ảnh hưởng hình học (width, position, thêm/xóa DOM, đọc offsetHeight). Tốn nhất.
- Repaint: đổi thứ chỉ ảnh hưởng hình thức (color, background) — không tính lại layout.
- Composite-only: transform, opacity — rẻ nhất, ưu tiên khi làm animation.

Tối ưu: gộp thao tác DOM, tránh xen kẽ đọc-ghi layout (layout thrashing), ưu tiên transform/opacity, đặt CSS trên đầu và script defer.