Virtual DOM 에 대하여 자세한 설명 부탁드립니다.

Question

Virtual DOM 에 대하여 자세한 설명 부탁드립니다.

JS 등을 이용하여 DOM 을 조작하는경우 렌더링에 걸리는 수많은 작업들은 우선 JS에서 객체처럼 사용 및 변경하고, 그 후에 실제 DOM과 비교하여 단 한번만 조작한다 따라서 렌더링 속도가 개선된다 정도로 이해하고 있습니다.

해당하는 이유를 제외하고는 따로 Virtual DOM 을 사용하는 이유가 없는것인가요??

그렇다면 오히려 페이지의 노드가 적거나, 일괄적인 변경이 적은 경우에는 실제 DOM 에다가 작업하는게 가상화 돔을 사용하는것보다 빠르고 효율적이지 않나요??

Answer 1

충분히 잘 최적화한다면 React나 Vue의 Virtual DOM보다 더 빠르고
React나 Vue를 잘못 쓰면 Virtual DOM을 안 쓰는 것보다 못합니다.

모든 변경사항을 실제 DOM에 반영하지 않고 아닌 Virtual DOM만 바꿨다가
실제로 화면을 그리기 전에 실제 DOM과 Virtual DOM이 다른 부분만 실제 DOM을 바꿉니다.

같은 DOM이 한 프레임 안에 100번 바뀌어도 Virtual DOM을 사용하면 실제로는 한 번만 반영됩니다.

Virtual DOM과는 관련이 없을 수도 있는데,
React의 react-window처럼 안 보이는 부분을 아예 빼 버리는 방법도 있습니다.