Virtual DOM과 브라우저 렌더링 과정 이해하기

Virtual DOM

•  실제 DOM을 추상화한 가상의 DOM 트리
•  실제 DOM은 비용이 많이 들기 때문에 고안된 게 Virtual DOM
•  실제 DOM의 복사본으로 Javascript 객체이고, React나 Vue에서 이 가상 DOM을 사용해서 UI를 조작하고 업데이트
•  실제 DOM 조작이 최소화되어 성능을 향상시키고 사용자 경험을 개선

 

증분 렌더링

• UI의 변경사항이 발생할 때 전체 UI를 다시 렌더링하는 대신, 이전 상태와의 차이를 계산하여 변경된 부분만을 업데이트하는 기술
• 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만을 실제 DOM에 반영
• UI 업데이트를 최적화 하는데 사용
• React.js에서 Virtual DOM과 함께 핵심 개념

 

브라우저 작동 원리

예시로 google.com을 검색했을 때 일어나는 일을 정리해보자

• URL 해석: 브라우저는 사용자가 입력한 주소인 "google.com"을 해석, 여기서 입력된 주소는 상대적인 주소라서 브라우저는 "https://www.google.com" 과 같은 완전한 URL로 변경
• 요청 전송: 브라우저는 "https://www.google.com" 으로 HTTP 요청을 생성하여 해당 서버에 전송
• 서버 응답: 구글의 서버는 요청을 받고 처리한 후에, 응답을 생성하여 클라이언트에 전송하는데 이 응답에는 HTML 문서와 함께 CSS 파일, JavaScript 파일, 이미지 등의 웹 페이지에 필요한 리소스가 포함
• 페이지 렌더링: 브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM을 생성함, 이어서 CSS와 JavaScript를 해석하고 실행하여 페이지의 스타일과 동작을 처리. 그 후 렌더링 엔진은 DOM 트리를 기반으로 렌더링 트리를 생성하고, 이를 화면에 그려 사용자에게 보여준다
• 사용자 화면에 표시: 렌더링 트리를 사용하여 브라우저는 페이지를 사용자의 화면에 표시하고 사용자는 구글의 검색 화면을 보게 된다