웹 브라우저 동작순서

우리가 웹 브라우저를 열고 웹 사이트에 접속을 하면 웹 브라우저 내부에서 어떤일이 벌어질까?

1. 웹 브라우저는 DNS에게 물어본다.
   이 호스트의 IP주소좀 알려달라(Domain Name System)

   이후, 브라우저는 받은 IP주소에 있는 서버를 찾아감.
   이때 랜덤 숫자를 적은 번호표를 가져감(Random Sequence)
   3way-Handshake가 일어남.데이터를 주고받기 위한 서로간의 잘 받았다는 약속.

   이후, 브라우저가 서버에 데이터를 요청함(HTTP Request)
   서바가 브라우저에 응답함(HTTP Response)

   이제 브라우저는 사용자에게 데이터 출력하면 됨
   그전에 서버의 데이터를 해석해야함.
   W3C 명세에 따라 html, css 데이터 해석.-> 이걸 파싱이라함

   먼저 브라우저의 렌더링 엔진은 html을 파싱하여 DOM Treee를 생성.
   이때 렌더링 엔진이 <style>를 만나면 html파싱 작업 중지 후
   css 파싱 작업을 시작하여 CSSOM Tree를 생성

   css 파싱을 마치면 전단계의 html 파싱이 중단된 지점부터 다시 진행.

   그러다가 <script>를 만나면 html 파싱작업을 멈추고 이번엔 자바스크립트 엔진에게 제어 권한을 넘김.
   자바스크립튼 엔진은 코드를 해석하여 추상 구문 Tree인 AST를 만들고 실행함(Abstract Syntax Tree)

   끝으로 중단됐던 HTML 파싱작업을 완료함.

   그 후 DOM Tree + CSSOM Tree 를 합쳐 Render Tree를 만듬 여기까지를 (Construction)이라함
   그리고 렌더링 엔진은 레이아웃 작업을 시작.이것은 렌더 트리의 노드들을 화면의 올바른 위치에 표시하는걸 의미.

   그다음 UI 백엔드가 렌더 트리의 노드들을 돌면서 UI를 그린다(Paint)
   그다음 노드들의 레이어 순서대로 구성하는 Composition단계
   z-index가 낮은 요소를 먼저 놓고 그다음에 높은 요소 놓는것.

   레이아웃부터 composition 까지과정을 operation이라함.
   

더 나은 UX를 위하여
파싱, 배치(layout) UI 그리는 과정은
서버로부터 모든 데이터를 받고 나서 시작하지 않는다.
브라우저는 사용자에게 더 빠르게 화면을 출력해주기 위해 서버로부터 데이터의 일부를 받고 나서 화면에 표시하고 또 데이터를 받게 되면 화면에 표시를 반복.
이때문에 부분적으로 화면이 뜨는 현상이 나타남.

참고영상