Virtual dom là gì

     

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

Bạn đang xem: Virtual dom là gì

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 làm truy xuất những tài liệu dạng HTML và XML. DOM đại diện thay mặt cho một tư liệu như là một trong những cây cấu tạo dữ liệu. Còn node thì đại diện cho một phần tử trong DOM.

Ví dụ đoạn code HTML tiếp sau đây sẽ mô tả cách trình chú tâm hoạt động.


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

Cấu trúc cây của đoạn HTML trên sẽ hệt như sau:

*

Mỗi thành phần trên DOM tree là một node. Từng text là một node. Ngay lập tức cả comment cũng là node! Một node đơn giản dễ dàng chỉ là 1 trong những “mảnh” bên trên trang web. Và cũng tương tự như vào một cây gia phả, từng node rất có thể có các node nhỏ (nghĩa là 1 trong mảnh hoàn toàn có thể chứa những mảnh khác).

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

Xem thêm: Gợi Ý Địa Điểm Bán Cây Ăn Trái Trồng Chậu Tphcm &Bull; Sài Gòn Hoa 2022

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

Đó chính là vấn đề khi thao tác làm việc với DOM thật. Và cầm là fan ta tạo ra Virtual DOM để xử lý vấn đề này. Đại diện lừng danh nhất cho Virtual DOM là React với Vue. Nhưng Virtual DOM chưa phải là phương án duy nhất, điển hình là ta có Incremetal DOM được sử dụng ở Angular, hay thao tác làm việc trực tiếp với DOM thật ở Svetle.

2. Virtual DOM là gì?

Virtual DOM (VDOM tốt DOM ảo) , là phương pháp thể hiện DOM thật của một trang web dưới dạng các Javascript object. Khi thay đổi state của tiện ích thì VDOM sẽ được update lại và đối chiếu với VDOM cũ (VDOM cũ được đồng điệu hóa với DOM thiệt trước đó) bằng thuật toán điện thoại tư vấn là diffing giỏi change detection nhằm tìm ra mọi node đề nghị thay đổi. Cuối cùng nó sẽ update những node kia trên DOM thật.

Ví dụ bọn họ muốn có một HTML như vậy này


Simple vDOM Hello Vietnam
Thì khi màn biểu diễn trên VDOM thì sẽ có dạng object tổng thể tương tự như thế này.

Xem thêm: Cách Tính Điểm Đại Học Thăng Long 2021 Chính Xác, Trường Đại Học Thăng Long

const vDOM = nodeName: "div", attributes: "app", children: < nodeName: "h1", attributes: null, children: <"Simple vDOM"> , nodeName: "ul", attributes: null, children: < nodeName: "li", attributes: null, children: <"Hello"> , nodeName: "li", attributes: null, children: <"Vietnam"> > >Và từ bỏ VDOM này, để render ra DOM thiệt thì ta dùng những DOM API của browser. Nếu không tồn tại các DOM API của browser thì chẳng thể nào mà tương tác với DOM thật làm việc client được.


document.createElement()document.createTextNode()document.appendChild()
Trên đó là cách thức buổi giao lưu của Virtual DOM tương tự như là React, Vue. Bây giờ mình sẽ phân tích và lý giải một số tin đồn về Virtual DOM