브라우저 workflow & virtual DOM - 01

최근에 virtual DOM의 동작과정에 대해 궁금해서 찾아봤다.

근데 virtual DOM을 이해하기 위해서는 순서가 있다... 허허허허허헣헣ㅎ 

 

virtual DOM을 이해하기 위해서는 브라우저 workflow를 알고 가면 좋다. 이해가 훨씬더 잘되는 느낌?

 

그래서 오늘은 브라우저 workflow과정을 적고 가려고한다. 

 

브라우저?

브라우저란 무엇일까? 우리가 인터넷을 접속할 때 사용하는 Chrome, Safari, FireFox, Explorer 등을 말한다.

MDN
웹 브라우저(Web browser)혹은 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크
를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다. 브라우저는 사용자 에이전트의 가장 친숙한 유형입니다.

브라우저는 유저가 선택한 자원을 서버로 부터 받아와서 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들을 렌더링 과정을 통해서 유저에게 보여주게 된다. 

 

간단한 요약과정!!

1. HMTL,CSS 파일을 각각 파싱

2. DOM Tree(html)에 Style Rules를 적용(attechment)해 Render Tree 생성

3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다.(Layout)

4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.(Paint)

5. 레이어를 합성하여 실제 화면에 나타낸다.(Composite)

 

 

DOM Tree 생성

브라우저가 HTML을 전달 받으면, 브라우저 렌더 엔진이 이를 파싱하고 DOM 노드(Node)로 이뤄진 트리를 만듭니다.

각 노드는 각 HTML 엘리먼트들과 연관되어 있습니다.

 

Render Tree 생성

외부 CSS 파일과 각 엘리먼트들의 inline 스타일을 파싱합니다. 스타일 정보를 사용하여 DOM트리에 따라 새로운 트리, 렌더트리를 생성! 

 

Render Tree 생성 - 그 뒤 생기는 일

Webkit에서 노드의 스타일을 처리하는 과정을 'attachment'라고 부릅니다.

DOM 트리의 모든 노드들은 'attch'라는 메서드를 가지고 있습니다. 이 메서드는 스타일 정보를 계산하여 객체 형태로 반환합니다. 이 과정은 동기적(synchronous)작업입니다. DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행됩니다.

 

렌더트리를 만드는 과정에선, 각 요소들의 스타일이 계산되고 또 이 계산되는 과정에서 다른요소들의 스타일 속성들을 참조합니다.

렌더트리에 구성예를 들면 visibility : hidden 은 요소가 공간을 차지하고 보이지만 않기 때문에 Render Tree에 포함이 되지만, display : none 의 경우 Render Tree에서 제외됩니다. 

 

 

Layout(reflow 라고도 불립니다.)

렌더트리가 다 만들어지고 나면, 레이아웃 과정을 거칩니다. 각 노드들은 스크린의 좌표가 주어지고 정확히 어디에 나타나야 할 지 위치가 주어집니다. 

 

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영합니다. 만약 크기 값을 %로 지정했다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환합니다. 

 

Painting

Painting 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환합니다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리됩니다.

 

당연한 말이지만 스타일이 복잡할수록 Paint 시간되 늘어납니다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다. 

 

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냅니다. 우리는 화면에서 웹페이지를 볼 수 있습니다. 

 

 

정리

브라우저의 workflow를 알아봤다. 비록 virtual DOM을 이해하려고 정리하긴했지만, 이 과정이 정말 알찼던거 같다. 항상 나무만보던 나의 눈이 숲을 보게된 느낌이랄까 전체적인과정을 보고 그안에 내용을 보는 습관을 들일 수 록 노력해야겠다. 

 

참고

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/

https://velopert.com/3236