왜 React의 Virtual DOM 컨셉이 더티한 모델 체크보다 더 성능적이라고 하는가?

왜 React의 Virtual DOM 컨셉이 더티한 모델 체크보다 더 성능적이라고 하는가?

(Pete Hunt: React: Reconning best practices - JSConf EU 2013)에서 React dev에 대해 이야기하는 것을 보았습니다.발언자는 모델에 대한 불결한 체크는 느릴 수 있다고 말했습니다.그러나 대부분의 경우 가상 DOM은 모델보다 커야 하기 때문에 가상 DOM 간의 차이를 계산하는 것은 실제로 성능이 훨씬 떨어지는 것이 아닐까요?

Virtual DOM(특히 서버측 렌더링)의 잠재적인 파워는 매우 마음에 들지만, 모든 장단점을 알고 싶습니다.

저는 가상 도메인 모듈의 주요 작성자이기 때문에 질문에 답변해 드릴 수 있을 것 같습니다.실제로 여기서 해결해야 할 문제가 2개 있습니다.

1. 언제 다시 렌탈하면 되나요?답변:데이터가 더러워진 것을 확인했을 때.
2. 효율적으로 재렌더하려면 어떻게 해야 하나요?답변: 가상 DOM을 사용하여 실제 DOM 패치를 생성합니다.

리액트에서는 각 컴포넌트에 상태가 있습니다.이 상태는 녹아웃 또는 다른 MVVM 스타일 라이브러리에서 볼 수 있는 관찰 가능 상태와 같습니다.기본적으로 React는 씬(scene)을 재렌더해야 하는 시기를 알고 있습니다. 데이터가 언제 변경되는지 관찰할 수 있기 때문입니다.데이터를 정기적으로 폴링하고 데이터 구조의 모든 값을 반복적으로 검사해야 하므로 더티 검사는 관찰 가능한 검사보다 느립니다.이에 비해 스테이트에 값을 설정하면 리스너에게 어떤 스테이트가 변경되었음을 알립니다.따라서 React는 스테이트의 변경 이벤트를 리슨하고 재렌더링을 큐잉할 수 있습니다.

가상 DOM 는, DOM 의 효율적인 재렌더링에 사용됩니다.이것은 데이터를 부정적으로 확인하는 것과는 관련이 없습니다.가상 DOM을 사용하여 더티 체크 유무에 관계없이 재렌더 할 수 있습니다.2개의 가상 트리 간의 차이를 계산하는 데 약간의 오버헤드가 있다는 점에서 옳습니다.그러나 가상 DOM 차이는 DOM에서 무엇을 업데이트해야 하는지 이해하는 것이며 데이터가 변경되었는지 여부를 파악하는 것입니다.실제로 diff 알고리즘은 더티 체커 그 자체이지만 대신 DOM이 더티한지 확인하기 위해 사용됩니다.

상태가 변경되었을 경우에만 가상 트리를 재렌더하는 것을 목표로 하고 있습니다.따라서 상태가 변화했는지 확인하기 위해 관측 가능한 것을 사용하는 것은 불필요한 재렌더를 방지하는 효과적인 방법입니다. 불필요한 나무 차이가 많이 발생합니다.아무것도 변하지 않았다면 아무것도 하지 않습니다.

가상 DOM은 마치 장면 전체를 다시 렌더링하는 것처럼 코드를 작성할 수 있기 때문에 좋습니다.이면에서는 DOM을 갱신하는 패치 조작을 계산하여 예상대로 하고 싶다고 생각하고 있습니다.따라서 가상 DOM diff/patch 알고리즘은 최적의 솔루션은 아닐 수 있지만 애플리케이션을 표현하는 매우 좋은 방법을 제공합니다.우리는 우리가 원하는 것을 정확히 선언하기만 하면, 리액트/가상 도메인이 당신의 상황을 이렇게 만드는 방법을 알아낼 것입니다.수동으로 DOM을 조작하거나 이전의 DOM 상태를 혼동할 필요가 없습니다.전체 장면을 다시 렌더링할 필요도 없습니다. 패치 적용보다 훨씬 덜 효율적일 수 있습니다.

최근 React의 diff 알고리즘에 대한 자세한 기사를 읽었습니다.http://calendar.perfplanet.com/2013/diff/제가 알기로는 React가 빠른 이유는 다음과 같습니다.

• 일괄 처리된 DOM 읽기/쓰기 작업.
• 서브트리의 효율적인 업데이트만.

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

1. 모델 더티 체크:반응 구성 요소가 항상 더러운 것으로 명시적으로 설정됨setState호출되므로 여기서 (데이터를) 비교할 필요가 없습니다.더티 체크의 경우 (모델의) 비교는 항상 각 다이제스트 루프에 발생합니다.

2. DOM 업데이트: DOM을 수정하면 CSS 스타일과 레이아웃도 적용 및 계산되기 때문에 DOM 작업은 매우 비용이 많이 듭니다.불필요한 DOM 의 변경에 의해서 절약되는 시간은, 가상 DOM 의 디퍼시에 걸리는 시간보다 길어질 가능성이 있습니다.

두 번째 포인트는 엄청난 양의 필드나 큰 리스트가 있는 모델 등 중요하지 않은 모델의 경우 더욱 중요합니다.복합 모델의 필드를 한 번 변경하면 전체 뷰/템플릿이 아니라 해당 필드를 포함하는 DOM 요소에 필요한 작업만 수행됩니다.

Virtual DOM(특히 서버측 렌더링)의 잠재적인 파워는 매우 마음에 들지만, 모든 장단점을 알고 싶습니다.

-- OP

리액트만이 DOM 조작 라이브러리는 아닙니다.자세한 설명과 벤치마크를 포함한 Auth0의 이 기사를 읽고 대안을 이해하시기 바랍니다.질문하신 바와 같이 이들의 장단점을 여기서 강조하겠습니다.

React.js의 가상 DOM

장점

• 빠르고 효율적인 '확산' 알고리즘
• 멀티프런트엔드(JSX, 하이퍼스크립트)
• 모바일 디바이스에서 실행할 수 있는 경량
• 많은 견인력과 마인드 셰어
• 리액트 없이 사용할 수 있습니다(즉, 독립 엔진으로 사용).

단점

• DOM의 풀인메모리 복사(고메모리 사용)
• 정적 요소와 동적 요소를 구분하지 않음

---

Ember.js' 글리머

장점

• 빠르고 효율적인 확산 알고리즘
• 정적 요소와 동적 요소의 차이점
• Ember의 API와 100% 호환(기존 코드를 크게 업데이트하지 않아도 이점을 얻을 수 있습니다)
• DOM의 경량 메모리 내 표현

단점

• Ember에서만 사용 가능
• 프런트엔드는 1개만 사용 가능

---

증분 DOM

장점

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

단점

• 다른 라이브러리만큼 빠르지 않음(이것은 논란의 여지가 있습니다.아래 벤치마크를 참조해 주세요.
• 마인드 셰어 및 커뮤니티 사용 감소

React 팀의 멤버인 Sebastian Markböge의 코멘트는 다음과 같습니다.

React는 출력(시리얼화 가능한 기존의 형식, DOM 속성)에 대한 분산을 수행합니다.즉, 소스 데이터는 모든 형식일 수 있습니다.이는 불변의 데이터 구조 및 폐쇄 내부 상태일 수 있습니다.

각도 모델은 참조 투명도를 유지하지 않으므로 본질적으로 변이 가능합니다.기존 모델을 변환하여 변경을 추적할 수 있습니다.매번 데이터 소스가 불변의 데이터이거나 새로운 데이터 구조(예: JSON 응답)라면 어떻게 하시겠습니까?

더티 검사 및 Object.observe는 닫힘 범위 상태에서는 작동하지 않습니다.

이 두 가지는 분명히 기능 패턴에 매우 제한적입니다.

또한 모델의 복잡성이 증가하면 추적이 더 비싸집니다.다만, React와 같이 비주얼 트리로만 확산하는 경우는, 어느 시점에서도 화면에 표시할 수 있는 데이터의 양이 UI에 의해서 제한되기 때문에, 그다지 증가하지 않습니다.Pete의 위 링크에는 성능상의 이점이 더 많이 포함되어 있습니다.

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

리액트에서는 각 컴포넌트에 상태가 있습니다.이 상태는 녹아웃 또는 다른 MVVM 스타일 라이브러리에서 볼 수 있는 관찰 가능 상태와 같습니다.기본적으로 React는 씬(scene)을 재렌더해야 하는 시기를 알고 있습니다. 데이터가 언제 변경되는지 관찰할 수 있기 때문입니다.데이터를 정기적으로 폴링하고 데이터 구조의 모든 값을 반복적으로 검사해야 하므로 더티 검사는 관찰 가능한 검사보다 느립니다.이에 비해 스테이트에 값을 설정하면 리스너에게 어떤 스테이트가 변경되었음을 알립니다.따라서 React는 스테이트의 변경 이벤트를 리슨하고 재렌더링을 큐잉할 수 있습니다.가상 DOM 는, DOM 의 효율적인 재렌더링에 사용됩니다.이것은 데이터를 부정적으로 확인하는 것과는 관련이 없습니다.가상 DOM을 사용하여 더티 체크 유무에 관계없이 재렌더 할 수 있습니다.2개의 가상 트리 간의 차이를 계산하는 데 약간의 오버헤드가 있다는 점에서 옳습니다.그러나 가상 DOM 차이는 DOM에서 무엇을 업데이트해야 하는지 이해하는 것이며 데이터가 변경되었는지 여부를 파악하는 것입니다.실제로 diff 알고리즘은 더티 체커 그 자체이지만 대신 DOM이 더티한지 확인하기 위해 사용됩니다.

상태가 변경되었을 경우에만 가상 트리를 재렌더하는 것을 목표로 하고 있습니다.따라서 상태가 변화했는지 확인하기 위해 관측 가능한 것을 사용하는 것은 불필요한 재렌더를 방지하는 효과적인 방법입니다. 불필요한 나무 차이가 많이 발생합니다.아무것도 변하지 않았다면 아무것도 하지 않습니다.

버추얼 돔은 반응에 의해 발명된 것이 아니다.HTML 돔의 일부입니다.가볍고 브라우저 고유의 구현 세부사항에서 분리되어 있습니다.

가상 DOM은 리액트의 HTML DOM 로컬 및 단순 복사라고 생각할 수 있습니다.이를 통해 React는 이 추상 세계에서 계산을 수행하고 "실제" DOM 작업을 건너뛸 수 있습니다. 종종 느리고 브라우저에 따라 다릅니다.실제로 DOM과 Virtual DOM은 큰 차이가 없습니다.

Virtual Domain을 사용하는 포인트는 다음과 같습니다(Resact의 소스 Virtual DOM).JS):

실행 시:

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

1. 브라우저는 HTML을 해석해야 합니다.
2. elementId의 자 요소를 삭제합니다.
3. DOM 값을 새 값으로 업데이트합니다.
4. 부모와 자녀의 css를 다시 계산합니다.
5. 레이아웃을 갱신합니다.즉, 각 요소가 화면의 정확한 좌표를 나타냅니다.
6. 렌더 트리를 이동하여 브라우저 디스플레이에 그립니다.

CSS 및 변경된 레이아웃을 재계산하면 복잡한 알고리즘이 사용되며 퍼포먼스에 영향을 미칩니다.

또한 DOM 속성(예: 값) 업데이트도 수행합니다.알고리즘에 따릅니다.

여기서 DOM을 10회 직접 업데이트하면 위의 모든 절차가 하나씩 실행되고 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