브라우저의 동작

브라우저 렌더링 과정

• DOM 트리 생성 : 렌더엔진이 html을 파싱하여 dom 노드로 이루어진 트리 생성

• RENDER 트리 생성 : css파일과 inline 스타일을 파싱
  DOM + CSSOM = 렌더트리를 생성

• Layout (reflow) : 각 노드들의 스크린에서의 좌표에 따라 위치 결정

• Paint (repaint) : 실제 화면에 그리기

• 돔 조작의 비효율성

Virtual Dom의 등장

Virtual Dom의 동작 원리

Dom Fragment의 변화를 묶어서 적용한 다음 기존 Dom에 던져주는 과정

재조정

ui의 가상적인 표현을 메모리에 저장하고 react Dom과 같은 라이브러리에 의해 실제 Dom과 동기화

리액트의 버추얼 돔

Jsx

바벨이 jsx를 react.createElement 형태로 파싱한다

리액트의 버추얼 돔

돔 요소의 가상버전으로 가볍고 상태를 가지지 않으며 불변성을 가집니다

불변성 덕분에 비교하고 업데이트 하는게 쉬워진다

리액트는 render()를 통해서 실제 Dom요소를 만든다

diffing 알고리즘

virtual Dom이 업데이트되면 react는 virtual Dom을 업데이트 이전의 virtual Dom 스냅샷과 비교하여 정확히 어떤 virtual Dom이 바뀌었는지 검사한다

무조건 virtual Dom 빠른가?

정보 제공만 하는 페이지라면 인터랙션이 발생하지 않기 때문에
일반 Dom의 성능이 더 좋을 수도 있다

=> spa로 제작된 큰규모의 웹페이지에선 virtual Dom을 사용해서 브라우저의 연산양을 줄여 성능을 개선할 수 있다