Bạn đã nghe React, Vue dùng Virtual DOM và thực sự thì nó rất nhanh, nhanh hơn cả DOM thật. Nhưng bạn chả hiểu Virtual DOM là cái gì và nó có ngon như lời đồn không. Bài viết hôm nay mình sẽ cùng các bạn đào sâu tìm hiểu Virtual DOM là gì cùng các nhận định liên quan đến Virtual DOM.

1. Đầu tiên phải biết DOM là gì?

DOM là viết tắt của Document Object Model (Mô hình Đối tượng Tài liệu) dùng để truy xuất các tài liệu dạng HTML và XML. DOM đại diện cho một tài liệu như là một cây cấu trúc dữ liệu. Còn node thì đại diện cho một phần tử trong DOM.

Ví dụ đoạn code HTML dưới đây sẽ mô tả cách trình duyệt hoạt động.

<div>
  <h1>Bài đồng dao</h1>
  Năm mới năm me
  <!-- TODO: Hoàn thành bài đồng dao -->
</div>

Khi đọc đoạn code này, trình duyệt sẽ xây dựng cấu trúc dạng cây (DOM tree) bao gồm các “DOM node” để giúp quản lí mọi thứ, tương tự như việc bạn xây dựng một cây gia phả để giữ thông tin về mọi người trong dòng họ vậy.

Cấu trúc cây của đoạn HTML trên sẽ giống như sau:

Mỗi phần tử trên DOM tree là một node. Mỗi text là một node. Ngay cả comment cũng là node! Một node đơn giản chỉ là một “mảnh” trên trang web. Và cũng tương tự như trong một cây gia phả, mỗi node có thể có các node con (nghĩa là một mảnh có thể chứa các mảnh khác).

Nếu muốn thay đổi giá trị các thẻ HTML, bạn không cần vào thẳng file HTML thay đổi lại mà chỉ cần thao tác trên DOM. Các phương thức DOM cho phép chúng ta truy cập đến cây cấu trúc và thay đổi cấu trúc, dữ liệu, style, nội dung của document.

Thời nay, các trang web có thể chứa đến hàng trăm ngàn các node khác nhau. Việc tìm kiếm và cập nhật lại DOM là một sự khó khăn. Chắc hẳn bạn không thể cứ document.getElementByClass() mãi để tìm từng node rồi tạo-xóa được, vì như vậy code sẽ phình rất to và tốc độ từ đó cũng chậm theo.

Đó chính là vấn đề khi thao tác với DOM thật. Và thế là người ta tạo ra Virtual DOM để giải quyết vấn đề này. Đại diện nổi tiếng nhất cho Virtual DOM là React và Vue. Nhưng Virtual DOM không phải là giải pháp duy nhất, điển hình là ta có Incremetal DOM được dùng ở Angular, hay thao tác trực tiếp với DOM thật ở Svetle.

#react #vue #javascript