Giải Mã Reconciliation: Bí Quyết Tốc Độ Của UI Hiện Đại Và Sự Thật Về Virtual DOM - Shadow DOM

Chào bạn, lập trình viên tương lai!

Bạn có bao giờ tự hỏi làm thế nào mà các ứng dụng web hiện đại như Facebook, Twitter lại có thể cập nhật giao diện người dùng (UI) một cách mượt mà đến vậy, dù có hàng tá thứ đang thay đổi cùng lúc? Câu trả lời nằm ở một cơ chế thông minh mang tên Reconciliation.

Hôm nay, chúng ta sẽ cùng mổ xẻ quá trình này, và đặc biệt, làm sáng tỏ hai khái niệm thường bị nhầm lẫn: Virtual DOM và Shadow DOM. Hãy cùng tìm hiểu bí mật đằng sau tốc độ của các ứng dụng web hiện đại nhé!

Reconciliation là gì và tại sao lại quan trọng?

Trong phát triển web, việc cập nhật trực tiếp Document Object Model (DOM) - cây cấu trúc HTML mà trình duyệt hiển thị - là một quá trình tốn kém. Mỗi khi DOM thay đổi, trình duyệt phải tính toán lại layout, style và vẽ lại các phần tử (reflow và repaint), điều này có thể gây ra hiện tượng giật, lag nếu xảy ra quá thường xuyên.

Đó là lúc Reconciliation xuất hiện. Reconciliation là một thuật toán được các thư viện và framework UI như React, Vue sử dụng để xác định cách cập nhật DOM thật một cách hiệu quả nhất.

Hãy hình dung thế này: bạn muốn thay đổi một vài chi tiết trong ngôi nhà của mình. Thay vì đập đi xây lại cả ngôi nhà (tương đương với việc cập nhật lại toàn bộ Real DOM), một kiến trúc sư thông minh (Reconciliation) sẽ xem xét bản vẽ cũ, so sánh với bản vẽ mới, và chỉ ra chính xác những viên gạch, mảng tường nào cần thay đổi. Kết quả là công việc được hoàn thành nhanh hơn, ít tốn kém hơn.

Quá trình Reconciliation diễn ra như thế nào?

1. Tạo ra một phiên bản UI mới: Khi trạng thái (state) hoặc thuộc tính (props) của ứng dụng thay đổi, framework sẽ tạo ra một cây UI mới trong bộ nhớ. Với React, đây chính là Virtual DOM.
2. So sánh (Diffing): Framework sẽ so sánh cây UI mới này với cây UI của lần render trước. Đây là bước cốt lõi của Reconciliation, nơi thuật toán "diffing" tìm ra sự khác biệt tối thiểu giữa hai cây.
3. Tạo danh sách thay đổi: Từ kết quả so sánh, một danh sách các thao tác cần thiết (ví dụ: thêm một phần tử, xóa một thuộc tính, thay đổi nội dung văn bản) được tạo ra.
4. Cập nhật DOM thật: Cuối cùng, tất cả các thay đổi được gom nhóm và thực hiện *một lần duy nhất* lên Real DOM. Điều này giảm thiểu tối đa số lần trình duyệt phải reflow và repaint, giúp UI mượt mà hơn.

Virtual DOM và Shadow DOM: Hai khái niệm, hai sứ mệnh

Mặc dù cả hai đều có chữ "DOM" và thường được nhắc đến trong ngữ cảnh tối ưu hiệu suất UI, Virtual DOM và Shadow DOM phục vụ các mục đích rất khác nhau. Chúng ta hãy cùng làm rõ từng khái niệm.

Virtual DOM là gì?

• Bản chất: Virtual DOM là một bản sao "ảo" của Real DOM, được viết bằng JavaScript. Nó là một đối tượng JavaScript nhẹ, biểu diễn cấu trúc UI của ứng dụng trong bộ nhớ.
• Mục đích: Mục đích chính của Virtual DOM là để tối ưu hóa quá trình Reconciliation. Nó cho phép các framework tính toán và xác định những thay đổi cần thiết trước khi "chạm" vào Real DOM, tránh các thao tác DOM trực tiếp tốn kém.
• Ai sử dụng: Các thư viện và framework như React, Vue, Preact là những ví dụ điển hình sử dụng Virtual DOM.
• Đặc điểm quan trọng: Virtual DOM không phải là một tiêu chuẩn của trình duyệt. Nó là một kỹ thuật được các framework tự implement.

Ví dụ: Trong React, khi bạn viết JSX: