javascript - DOM을 직접 운영하는 것보다 가상 DOM의 반응 효율성이 더 빠른 이유는 무엇입니까?

Question

React에는 Virtual DOM이라는 개념이 있습니다. 기본 DOM 작업과 다른 점은 JS를 사용하여 중개자와 유사한 가상 DOM을 생성한다는 점입니다. JS를 사용하여 구현한 DOM입니다. 변경한 후 다시 렌더링하여 차별화된 부분을 로컬 렌더링합니다. 이렇게 하면...

習慣沉默 · Answer

다음 두 가지 작업을 수행할 수 있으면 React보다 더 빠르게 수행할 수 있다고 이해합니다.

불필요한 재렌더링을 피하세요.
더 나은 diff 알고리즘을 사용하세요!

자세한 내용은 작성자의 답변을stackoverflow上virtual dom 참조하세요.

某草草 · Answer

이렇습니다.
일단 가상 DOM은 직접 네이티브 연산보다 빠르지 않습니다. 소위 "빠르다"는 것은 조건부입니다.
예를 들어 숫자 +1과 같이 dom의 직접 연산이 더 빠릅니다.
규칙은 수동으로 DOM을 작동할 때마다 변경해야 할 부분만 변경하는 것입니다. 그러면 DOM 작업은 항상 가상 DOM보다 빠릅니다.
그러나 변경 사항이 여러 위치에 연결되어 있고 원하는 경우. 상태를 유지하기 위해 가상 돔의 자동 비교는 의심할 여지 없이 더 많은 걱정을 덜어줄 것입니다.
예를 들어 목록에서 목록 항목에는 좋아요, 답글 수 및 기타 정보와 같은 상태가 있으며 동적 추가가 있습니다. 이때 돔을 직접 조작하는 것은 매우 번거로울 것입니다.
가상 돔의 핵심은 diff로, 조정해야 할 영역을 자동으로 계산한 다음 조정해야 할 영역만 수정하는 것입니다. 저장되는 것은 실행 속도와 같은 작은 속도가 아니라 개발 속도/유지 관리 속도/논리 단순성과 같은 "전체 속도"입니다. 물론 virtual DOM에도 단점이 있으므로 이에 대해서는 다루지 않겠습니다. 여기로

PHP中文网 · Answer

모든 페이지의 모든 DOM 변경을 최적화하기 위해 많은 노력을 기울이면 자동화된 가상 DOM보다 확실히 더 빠를 것입니다.
문제는 일반적인 상황에서는 이를 수행하지 않는다는 것입니다.
따라서 대부분의 경우 vitrual DOM은 더 빠른 조건에서 더 강력한 기능(예: 캔버스에 컨트롤 렌더링)을 제공할 수 있습니다.

曾经蜡笔没有小新 · Answer

Visual DOM은 DOM을 직접 조작하는 것보다 빠르지 않으며(작성한 코드가 충분하다면) React의 모든 메커니즘을 다시 렌더링하기 때문에 나타납니다. 즉, React의 경우 모든 변경 사항을 적용하려면 전체 애플리케이션을 다시 렌더링해야 합니다. 실제 DOM인 경우 이러한 성능은 허용되지 않습니다.

자세한 내용은 유다의 답변을 확인하실 수 있습니다