브라우저가 그려지는 원리와 가상 돔

웹 페이지 빌드 과정 (Critical Rendering Path) CRP

서버 -> HTML  문서 -> 브라우저의 과정을 CRP라고 한다.

 

DOM tree 생성

렌더 엔진이 문서를 읽어들여 그것들을 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정

 

Render tree 생성

화면에 표시되는 모든 콘텐츠 및 스타일 정보를 포함

 

Layout(reflow)

브라우저 각 요소의 크기와 위치를 계산하는 단계

 

Paint

실제 화면에 그리기

 

위와 같은 과정을 거쳐서 실제 우리가 사용하는 웹사이트가 우리에게 보이게 된다.

솔직히 난 이런거 모르고 개발부터 때려 박았는데.. 뭔가 잘못된 것 같다..

 

헤헤.. 이제부터 열심히 해보자.. 

---

위에서 문제접은 어떤 환경에 의해 DOM이 조금이라도 변화되면 위 과정을 다시 반복해야 한다.

만약 너무 많은 DOM에 변화가 일어나면 성능상에 영향을 미칠 수 있음

 

인터렉션이 적다면 괜찮지만 많다면 DOM을 조작하는 비용이 너무 커짐

 

그래서 해결하기 위해 가상 돔이라고 똑똑한 사람들이 만들었음

Virtual Dom 이라고 하고 실제 돔이라고 실제 DOM을 메모리에 복사했음 

 

---

가상 DOM 의 작동원리

만약 이전과 현재의 가상 돔이 다르다면

바뀐 부분만 실제 돔에 적용을 시켜주고 바뀐 부분을 찾는 과정을 Diffing이라고 함

바뀐 부분만 실제 돔에 적용시켜 주는 것을 재조정(reconciliation)이라고 함

 

 

위 가상돔을 이용하면 요소 30개가 변하더라도 한 번에 묶어서 한 번에 실제 돔 수정으로 처리하여 돔을 조작하는 비용이 줄어들게 됨

 

오.. 혁신적.

 

 

---

흠... 이런 기초적인것도 모르고 개발을 한 나.. 반성하자..

다 외우지는 못하더라도 설명은 할 수 있어야 된다..

 

나는 놀고 먹는것이 꿈이니까!!!!

 

제일 쉬운방법은 공부 그리고 또 공부이다!!