Trong hành trình phát triển frontend, việc tối ưu hóa thao tác DOM luôn là trọng tâm. Một quan niệm phổ biến cho rằng Virtual DOM được tạo ra để giải quyết vấn đề hiệu suất, nhưng thực tế phức tạp hơn nhiều. Hãy cùng khám phá bản chất thực sự của nó.

Virtual DOM là một đối tượng JavaScript mô tả cấu trúc và thuộc tính của DOM thực. Nó không phải là một thư viện, mà là một khái niệm thiết kế. Dưới đây là ví dụ minh họa:

const virtualNode = {
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: { textContent: 'Hello' } }
  ]
};

Quá trình hoạt động của Virtual DOM diễn ra qua hai giai đoạn chính:

1. Mounting: Chuyển đổi JSX thành cây Virtual DOM, sau đó render sang DOM thực.
2. Updating: So sánh cây Virtual DOM trước và sau khi thay đổi, xác định phần cần cập nhật, rồi áp dụng thay đổi tối ưu lên DOM thực.

Trước khi có Virtual DOM, các phương pháp xử lý DOM đã trải qua nhiều giai đoạn:

• Thời kỳ nguyên thủy: Sử dụng DOM API nguyên thủy, thao tác thủ công phức tạp.
• Thời kỳ jQuery: Cung cấp API đơn giản nhưng vẫn yêu cầu thao tác trực tiếp vào DOM.
• Thời kỳ engine template: Giải quyết vấn đề bằng cách kết hợp dữ liệu và HTML thành chuỗi, nhưng cập nhật toàn bộ DOM mỗi lần thay đổi.

Điểm khác biệt then chốt của Virtual DOM nằm ở cơ chế "so sánh" (diff) và "áp dụng" (patch). Thay vì cập nhật toàn bộ DOM như template engine, nó chỉ thay đổi các phần thực sự thay đổi. Cơ chế này được minh họa qua quy trình sau:

// Cây Virtual DOM trước
const oldTree = { type: 'div', children: [{ type: 'p', text: 'Old' }] };

// Cây Virtual DOM sau
const newTree = { type: 'div', children: [{ type: 'p', text: 'New' }] };

// So sánh và tạo bản cập nhật
const patches = diff(oldTree, newTree); // Chỉ tạo patch cho nội dung text

// Áp dụng patch lên DOM thực
patchDOM(realDOM, patches);

Hiệu suất thực tế phụ thuộc vào ngữ cảnh cụ thể:

• Khi thay đổi dữ liệu nhỏ (ví dụ: một trường trong đối tượng), Virtual DOM có lợi thế nhờ cập nhật chênh lệch.
• Khi thay đổi toàn bộ cấu trúc, việc tính toán diff có thể làm giảm hiệu suất so với cập nhật toàn bộ.

Giá trị thực sự của Virtual DOM không nằm ở hiệu suất, mà ở hai khía cạnh:

1. Trải nghiệm phát triển: Cho phép lập trình theo cách khai báo (declarative), tập trung vào dữ liệu thay vì thao tác DOM.
2. Chuyển đổi đa nền tảng: Cây Virtual DOM có thể tương thích với nhiều nền tảng (Web, React Native, WeChat Mini Program) nhờ lớp trừu tượng chung.

Thực tế, React không quảng cáo Virtual DOM như một giải pháp hiệu suất. Giá trị cốt lõi của nó là cung cấp một mô hình lập trình tối ưu cho các ứng dụng phức tạp, đồng thời duy trì hiệu suất đủ tốt trong hầu hết trường hợp thực tế.