브라우저는 어떻게 동작할까?

개발을 하다보면 구글에 검색을 할때가 많다.

웹사이트에 들어가면 브라우저 안에서 무슨일이 벌어지는걸까? 한번 알아보았다.

 

1. 데이터를 받아오는 과정

• 사용자가 브라우저로 웹사이트에 접속하면 브라우저는 DNS서버(도메인 이름과 IP 주소를 서로 변환하는 서버) 에게 ip주소를 받아온다. 
• 브라우저는 이 ip주소를 가지고 해당하는 서버를 찾아가서 웹사이트의 데이터를 요청한다
• (이때 요청하는 데이터는 html, css, 스크립트 파일등 웹사이트를 구성하는 데이터들이다. HTTP Request 라고도 함)
• 서버는 데이터를 그냥 주지 않는다. 양쪽 모두 데이터를 주고 받을 준비가 되었는지 확인하는 3way handshaking를 진행하고 성공을 한다면 데이터를 보내게 된다. (HTTP Response)

2. 트리 구축 과정

그림을 보면 더 쉽게 이해 가능!

• 브라우저의 렌더링엔진은 먼저 HTML 파일을 파싱하여 DOM tree를 생성합니다.
• 데이터를 따라서 쭉 Parsing하다가 중간에 css 코드를 만나게 되면 HTML Parsing작업을 중지하고 css를 Parsing하여 CSSOM tree 를 생성한다.
• CSS Parsing을 마치면 조금 전에 HTML Parsing이 중단된 지점부터 다시 Parsing을 시작한다.
• 그러다 스크립트 태그를 만나면 다시 Parsing 작업을 중지하고 자바스크립트 엔진에게 제어 권한을 넘겨서 자바스크립트 코드를 Parsing 하여 AST(Abstract Syntax Tree)를 생성하고 같은 작업을 반복한다.
• Passing 작업을 마무리 하면 DOM tree, CSSOM tree를 합쳐 Render tree를 생성한다.
• 위의 작업들을 Construction 이라고 한다.

3. 뷰포트에 뿌리는 과정

• 이렇게 만든 Render tree의 각 노드가 가지는 정확한 위치와 크기를 계산하여 위치 시킨다. (Layout)
• 그 다음 Render Tree의 노드들을 돌면서 UI를 그린다. (paint)
• 노드들의 레이어를 순서대로 구성하는 Composition 단계이다. z-index가 낮은 요소를 먼저 놓고 그 다음에 높은 요소를 놓는 것이다.
• Layout 작업부터 Composition 까지의 과정을 Operation이라고 한다.

이 과정이 마무리 되면 최종적으로 웹 사용자에게 결과 화면을 출력하고 우리는 신나게 웹서핑을 할 수있다.