browser workflow, virtual dom

1. 브라우저의 Workflow

 

 

 

1. Dom Tree 생성

 

브라우저가 HTML을 전달받으면, 브라우저의 랜더 엔진이 이를 파싱하고 DOM 노드로 이루어진 트리를 생성합니다.

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

 

 

2. Render Tree 생성

 

외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱하고, DOM Tree 의 내용을 올바른 순서로 칠할 수 있도록

랜더 트리를 생성합니다.

 

 

3. Layout (reflow)

 

각 노드들에 스크린 좌표가 주어지고 어디에 나타나야 할지 위치가 주어집니다.

 

 

4. Painting

 

랜더링 된 요소들에 색을 입히는 과정.

트리의 각 노드들을 순회하면서 paint() 메서드를 호출합니다.

 

 

위 과정은 점진적인 프로세스지만 더 나은 사용자 경험을 위해 랜더링 엔진은 가능한 한 빨리 화면에 내용을 표시하려고 시도합니다.

랜더 트리를 빌드하고 레이아웃을 시작하기 전에 모든 HTML이 구문 분석될 때까지 기다리지 않습니다. 

콘텐츠의 일부가 구문 분석되어 표시되고, 프로세스는 네트워크에서 계속 나오는 나머지 콘텐츠로 계속 진행됩니다.

 

https://velopert.com/3236

 

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

 

 

2. Virtual Dom

 

 

virtual dom을 쓰지 않는 경우

 

1. model에서 데이터를 받아서 첫 페이지를 그리고 저장합니다.

2. 업데이트가 필요한 데이터를 받습니다.

3. 첫 페이지에서 업데이트가 필요한 엘리먼트들을 찾아 값을 업데이트하고 엘리먼트들을 기억해둡니다.

4. 업데이트가 필요한 데이터를 받습니다.

5. 업데이트가 필요한 엘리먼트들을 찾아 값을 업데이트하고 엘리먼트들을 기억해둡니다.

6. 업데이트와 저장을 반복합니다.

 

 

virtual dom을 쓰는 경우

 

1. model에서 완성된 데이터 세트를 받아옵니다.

2. view가 데이터를 기반으로 페이지 전부를 그립니다.

3. 그려진 페이지를 react에 전달합니다.

4. react가 real dom과 전달받은 페이지를 대조하여 업데이트된 부분을 real dom에 반영합니다.

 

https://www.youtube.com/watch?v=muc2ZF0QIO4