Real DOM và Virtual DOM cái nào nhanh hơn?

GDragon · October 1, 2021, 8:17am

Mình thấy nhiều tài liệu nói về công dụng của DOM ảo, nhưng thực sự thì cái hiệu năng của cái nào sẽ tốt hơn nhỉ

kisuluoibieng · October 1, 2021, 11:34am

tài liệu nào?
bạn biết gì về dom và dom ảo chưa? nếu như chưa biết gì ngoài cái keyword thì có trả lời cũng bằng thừa

superthin · October 2, 2021, 12:25pm

Chắc chắn là DOM sẽ nhanh hơn virtual DOM. Nhưng với nhiều lập trình viên không có đủ thời gian / trình để viết mã tốt để loại bỏ những thao tác thừa, lúc này virtual DOM sẽ quan sát để thấy rằng nếu thao tác đó thừa thì chưa làm gì tác động vào DOM mà đợi thao tác sau rồi gộp chung thực hiện một một thể hoặc theo một trình tự hợp lý hơn. Vì thế, nhiều người nghĩ rằng virtual DOM nhanh hơn DOM. Sao nhanh hơn được khi một cái là trực tiếp được trình duyệt hỗ trợ, một cái là trung gian?

Devil_Chan · October 2, 2021, 5:40pm

Dom bình thường sẽ nhanh hơn , còn dom ảo như bạn nói là render từ javascrpit , Trình duyệt đọc javascrpit xong mới render ra dom ảo. Dom ảo “nhanh” đối với website SPA

s0ulo0o · October 2, 2021, 7:07pm

nói nhanh hơn cũng không hẳn. Virtual DOM thì cũng render thành DOM thôi, rồi còn tốn RAM hơn nên có trường hợp còn chậm hơn. Lý thuyết thì virtual DOM chỉ rerender cái nào thay đổi mà thôi, nên với app nào to + nhiều child component thì có lẽ virtual DOM sẽ có performance tốt hơn

Ntech_Developers · October 3, 2021, 1:52am

Giải thích DOM hơn DOM Ảo đây nhé

github.com

rohan-paul/Awesome-JavaScript-Interviews/blob/master/React/Virtual-DOM-and-Reconciliation-Algorithm.md

### Simple ans to why React app load faster is - its Because of virtual DOM.

The virtual DOM is a tree based on JavaScript objects created with React that resembles a DOM tree. Each time you need to change something in the DOM, React employs a different algorithm that exclusively re-renders the DOM nodes that have changed. Meaning, React allows developers to write code as if the entire page is rendered on each change while in the underhood React ONLY renders sub-components that have actually changed.

### What is DOM rendering

The basic task we're talking about is taking the internal state of the program and mapping it to something visible on the screen. You take an assortment of objects, arrays, strings, and numbers and end up with a tree of text paragraphs, forms, links, buttons, and images. On the web, the former is usually represented as JavaScript data structures, and the latter as the Document Object Model

We often call this process rendering, and you can think of it as a projection of your data model to a visible user interface. When you render a template with your data, you get a DOM (or HTML) representation of that data.

[http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html](http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html)

## How normal DOM (without React) works

##### 1> [https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e](https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e)

[https://developer.mozilla.org/en-US/docs/Mozilla/Introduction_to_Layout_in_Mozilla](https://developer.mozilla.org/en-US/docs/Mozilla/Introduction_to_Layout_in_Mozilla)

Since DOM is represented as a tree structure, and changes to the DOM is pretty quick but the changed element, and it’s children’s has to go through Reflow/Layout stage and then the changes has to be Re-painted which are slow. Therefore more the items to reflow/repaint, more slow your app becomes.

This file has been truncated. show original