Bỏ qua

Quy Trình Render Website: Từ HTML Đến Màn Hình

17544062762283169101411464819611

6 Bước Chính

1. Parse HTML → DOM Tree

Browser nhận HTML từ server và chuyển đổi thành cây DOM.

<html>
  <body>
    <div><h1>Hello</h1></div>
  </body>
</html>
→ Tạo cây DOM với các node tương ứng

2. Parse CSS → CSSOM Tree

CSS được load và parse thành CSSOM (CSS Object Model).

h1 { color: blue; font-size: 24px; }
div { padding: 20px; }
→ Tạo cây CSSOM với style rules

3. Combine → Render Tree

Kết hợp DOM + CSSOM = Render Tree - Loại bỏ invisible elements (<head>, display: none) - Chỉ giữ các elements hiển thị được

4. Layout (Reflow)

Tính toán vị trí và kích thước của từng element: - Position (top, left) - Size (width, height)
- Box model (margin, padding, border)

5. Paint

Chuyển render tree thành pixels thực tế: - Background colors - Text content - Borders, shadows - Images

6. Composite & Display

  • GPU nhận pixels
  • Hiển thị lên màn hình
  • Composite các layers

Câu Hỏi Phỏng Vấn Hay Gặp

Q: Sự khác biệt display: none vs visibility: hidden? A: display: none loại khỏi render tree, visibility: hidden vẫn chiếm không gian

Q: CSS và JS block rendering như thế nào? A: CSS block render tree, JS block DOM parsing

Q: Reflow vs Repaint? A: Reflow = tính lại layout (đắt), Repaint = vẽ lại visual (rẻ hơn)

Performance Tips

  • Batch DOM changes
  • Dùng transform cho animations
  • Minimize layout-triggering properties
  • Optimize critical rendering path

Cập nhật: 2025-08-05 15:00:43 UTC | lelongc

Bình luận