React의 Virtual DOM 개념이 더티 모델 검사보다 성능이 뛰어난 이유는 무엇입니까?

React의 Virtual DOM 개념이 더티 모델 검사보다 성능이 뛰어난 이유는 무엇입니까?

---

나는 ( Pete Hunt : React : Rethinking best practice-JSConf EU 2013 ) 에서 React dev 강연을 보았고 화자는 모델의 더러운 확인이 느릴 수 있다고 언급했습니다. 그러나 대부분의 경우 가상 DOM이 모델보다 커야하므로 가상 DOM 간의 차이를 계산하는 것이 실제로 성능이 떨어 집니까?

Virtual DOM (특히 서버 측 렌더링)의 잠재력을 정말 좋아하지만 모든 장단점을 알고 싶습니다.

---

저는 virtual-dom 모듈 의 기본 저자 이므로 귀하의 질문에 대답 할 수 있습니다. 실제로 해결해야 할 두 가지 문제가 있습니다.

1. 언제 다시 렌더링합니까? 답변 : 데이터가 더러워진 것을 관찰했습니다.
2. 효율적으로 다시 렌더링하려면 어떻게합니까? 답변 : 가상 DOM을 사용하여 실제 DOM 패치 생성

React에서 각 구성 요소는 상태를 갖습니다. 이 상태는 녹아웃 또는 다른 MVVM 스타일 라이브러리에서 볼 수있는 관찰 가능과 같습니다. 기본적으로 반작용이 알고있는 경우 가 때이 데이터 변경 관찰 할 수 있기 때문에 장면을 다시 렌더링 할 수 있습니다. 정기적으로 데이터를 폴링하고 데이터 구조의 모든 값을 재귀 적으로 확인해야하기 때문에 더티 검사는 관찰 가능 항목보다 느립니다. 이에 비해 상태 값을 설정하면 일부 상태가 변경되었음을 리스너에게 알릴 수 있으므로 React는 단순히 상태에서 변경 이벤트를 수신하고 다시 렌더링을 대기시킬 수 있습니다.

가상 DOM은 DOM을 효율적으로 다시 렌더링하는 데 사용됩니다. 이것은 실제로 데이터 더러운 검사와 관련이 없습니다. 더티 검사가 있거나없는 가상 DOM을 사용하여 다시 렌더링 할 수 있습니다. 두 가상 트리 사이의 차이를 계산하는 데 약간의 오버 헤드가 있지만 가상 DOM 차이는 데이터가 변경되었는지 여부와 관계없이 DOM에서 업데이트해야 할 사항을 이해하는 데 있습니다. 실제로 diff 알고리즘은 더티 체커 자체 이지만 DOM이 더티인지를 확인하는 데 사용됩니다.

상태가 변경 될 때만 가상 트리를 다시 렌더링하는 것이 목표입니다. 따라서 옵저버 블을 사용하여 상태가 변경되었는지 확인하는 것은 불필요한 다시 렌더링을 방지하는 효율적인 방법으로, 불필요한 트리 차이가 많이 발생합니다. 아무것도 변하지 않으면 우리는 아무것도하지 않습니다.

가상 DOM은 마치 전체 장면을 다시 렌더링하는 것처럼 코드를 작성할 수 있기 때문에 좋습니다. 배후에서 우리는 DOM을 업데이트하여 우리가 기대하는 방식을 보이는 패치 작업을 계산하려고합니다. 따라서 가상 DOM diff / patch 알고리즘 은 최적의 솔루션이 아니지만 응용 프로그램을 표현할 수있는 아주 좋은 방법입니다. 우리는 단지 우리가 원하는 것을 정확하게 선언하고 React / virtual-dom은 장면을 이렇게 보이게 만드는 방법을 연습 할 것입니다. 수동 DOM 조작을하거나 이전 DOM 상태에 대해 혼동하지 않아도됩니다. 전체 장면을 다시 렌더링 할 필요가 없으므로 패치하는 것보다 훨씬 덜 효율적일 수 있습니다.

---

최근에 React의 diff 알고리즘에 대한 자세한 기사를 읽었습니다 : http://calendar.perfplanet.com/2013/diff/ . 내가 이해 한 것에서 React를 빠르게 만드는 것은 다음과 같습니다.

• 배치 된 DOM 읽기 / 쓰기 작업
• 하위 트리 만 효율적으로 업데이트합니다.

더티 체크와 비교하여 IMO의 주요 차이점은 다음과 같습니다.

1. 모델 더티 점검 : React 컴포넌트는 setState호출 될 때마다 명시 적으로 더티로 설정 되므로 여기에 데이터를 비교할 필요가 없습니다. 더티 검사의 경우 모델의 비교는 항상 각 다이제스트 루프에서 발생합니다.

2. DOM 업데이트 : DOM을 수정하면 CSS 스타일, 레이아웃을 적용하고 계산하기 때문에 DOM 작업이 매우 비쌉니다. 불필요한 DOM 수정으로 절약 된 시간은 가상 DOM을 비교하는 데 소요되는 시간보다 길 수 있습니다.

두 번째 요점은 많은 양의 필드가 있거나 큰 목록이있는 것과 같은 사소한 모델에 훨씬 더 중요합니다. 복잡한 모델의 한 필드 변경으로 인해 전체 뷰 / 템플릿 대신 해당 필드와 관련된 DOM 요소에 필요한 조작 만 발생합니다.

---

Virtual DOM (특히 서버 측 렌더링)의 잠재력을 정말 좋아하지만 모든 장단점을 알고 싶습니다.

-OP

리 액트 만이 DOM 조작 라이브러리가 아닙니다. 자세한 설명과 벤치 마크가 포함 된 Auth0 의이 기사를 읽고 대안을 이해하는 것이 좋습니다 . 나는 당신이 요구 한대로 여기에 그들의 장단점을 강조하겠습니다 :

React.js의 가상 DOM

찬성

• 빠르고 효율적인 "확산"알고리즘
• 다중 프론트 엔드 (JSX, 하이퍼 스크립트)
• 휴대 기기에서 실행할 수있을 정도로 가벼움
• 많은 견인력과 마음가짐
• React없이 사용할 수 있습니다 (예 : 독립 엔진으로)

단점

• DOM의 전체 메모리 사본 (더 높은 메모리 사용)
• 정적 요소와 동적 요소를 구분하지 않음

---

Ember.js의 글 림머

찬성

• 빠르고 효율적인 디핑 알고리즘
• 정적 요소와 동적 요소의 차별화
• Ember의 API와 100 % 호환 (기존 코드를 크게 업데이트하지 않고도 이점을 얻을 수 있음)
• DOM의 가벼운 메모리 내 표현

단점

• Ember에서만 사용되는 의미
• 하나의 프론트 엔드 만 사용 가능

---

증분 DOM

찬성

• 메모리 사용량 감소
• 간단한 API
• 많은 프론트 엔드 및 프레임 워크와 쉽게 통합 (처음부터 템플릿 엔진 백엔드로 의미)

단점

• 다른 라이브러리만큼 빠르지 않습니다 (논쟁의 여지가 있습니다. 아래 벤치 마크 참조).
• 적은 정신 공유 및 커뮤니티 사용

---

다음은 React 팀 멤버 Sebastian Markbåge의 의견입니다.

React does the diffing on the output (which is a known serializable format, DOM attributes). This means that the source data can be of any format. It can be immutable data structures and state inside of closures.

The Angular model doesn't preserve referential transparency and therefore is inherently mutable. You mutate the existing model to track changes. What if your data source is immutable data or a new data structure every time (such as a JSON response)?

Dirty checking and Object.observe does not work on closure scope state.

These two things are very limiting to functional patterns obviously.

Additionally, when your model complexity grows, it becomes increasingly expensive to do dirty tracking. However, if you only do diffing on the visual tree, like React, then it doesn't grow as much since the amount of data you're able to show on the screen at any given point is limited by UIs. Pete's link above covers more of the perf benefits.

https://news.ycombinator.com/item?id=6937668

---

You can read this(The difference between Virtual DOM and DOM) artical to know about Real DOM and Virtual DOM. Hope it will help you!

---

Virtual Dom is not invented by react. It is part of HTML dom. It is lightweight and detached from the browser-specific implementation details.

We can think virtual DOM as React’s local and simplified copy of the HTML DOM. It allows React to do its computations within this abstract world and skip the “real” DOM operations, often slow and browser-specific. Actually there is no big differenc between DOM and VIRTUAL DOM.

Below are the points why Virtual Dom is used (source Virtual DOM in ReactJS):

When you do:

document.getElementById('elementId').innerHTML = "New Value" Following thing happens:

1. Browser needs to parse the HTML
2. It removes the child element of elementId
3. Updates the DOM value with new value
4. Re-calculate the css for the parent and child
5. Update the layout i.e. each elements exact co-ordinates on the screen
6. Traverse the render tree and paint it on the browser display

Recalculating the CSS and changed layouts uses complex algorithm and they effect the performance.

As well as updating the DOM properties ie. values. It follows a algorithm.

이제 DOM을 10 번 직접 업데이트하면 위의 모든 단계가 하나씩 실행되고 DOM 알고리즘을 업데이트하면 DOM 값을 업데이트하는 데 시간이 걸립니다.

이것이 Real DOM이 가상 DOM보다 느린 이유입니다.

참고 URL : https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode