크롬을 열고 google.com 입력했다.
첫번째로 DNS 서버에서 google.com 해당하는 IP 주소가 무엇인지 검색하고,
그 결과를 url 에 입력된 정보와 함께 전달하게 된다
두번째로는 전달받은 IP 주소와 기타 정보들을 HTTP 프로토콜을 사용하여,
요청 메시지를 생성하고, HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송된다.
세번째로 서버는 response 메시지를 생성하여, 다시 브라우저에게 데이터를 전송한다.
마지막으로 브라우저는 받은 response 데이터를 바탕으로 파싱하여 화면에 렌더링 한다. 아마 생소한 용어가 많을 수도 있다.
TCP/IP 니 파싱이나 렌더링이니, 설명에 앞서 위 생소한 용어들을 아래에서 정리해보자
DNS 란?
google.com -> 192.0.2.44 로 바꿔주는 친구이다.
모든 통신에는 주소가 필요하다.
출발지와 도착지의 주소를 알아야 통신을 할 수 있는데, 우리는 이 주소를 IP라고 부른다.
DNS 는 이런 수많은 도메인, IP 주소를 가지고있는 거대한 사전이고, 도메인을 입력하면 해당 도메인에 맞는 IP 주소를 던져주는 친구라고 할 수 있다.
HTTP 란
HyperText Transfer Protocol 의 약자로 클라이언트와 서버 사이의 요청/응답 프로토콜이다.
사람이 쉽게 읽고 쓸 수 있도록 되어있고, 클라이언트가 요청을 보내면 반드시 응답을 받는다는 특징이 있다.
프로토콜은 뭔데?
프로토콜은 말그대로 통신 하기 위한 약속이다. 이 약속들은 기술적으로 잘 정의되어 있고, 다양한 방식들이 있는데 HTTP, TCP/IP, UDP 등등 이런 것들이 모두 프로토콜 이다.
파싱은 뭘까?
한국어로 하면 구문분석이다.
우리가 작성한 HTML, JAVASCRIPT 등을 해석하여 웹 브라우저가 문서를 렌더링 할 수 있도록 분석과 해석을 해주는 과정이다.
조금더 자세히 말하자면,
데이터를 조립해서 원하는 데이터를 빼내는 프로그램을 통칭하는 말인데,
어떤 data를 원하는 form으로 만들어 내는 것이라고 할 수 있다.
렌더링은 뭔대?
HTML , CSS, JS 로 작성된 문서를 파싱해서 브라우저에 시각적으로 출력하는 것이다.
렌더링에 대해서 자세히 알아보자
우선 브라우저의 렌더링 엔진은 HTML 을 파싱해서 DOM TREE 를 만든다.
이렇게 HTML 을 열심히 파싱하다가 Style 태그를 만난다면 HTML 파싱을 잠시 멈추고,
해당 CSS 를 파싱하여 CSSOM TREE 를 생성한다.
CSS 파싱이 끝나면 다시 하던 HTML 파싱을 멈춘 부분부터 다시 시작하고,
스크립트 태그를 만나면? HTML 파싱을 잠시 멈추고
이번에는 자바스크립트 엔진에게 제어권한을 넘깁니다 (자바스크립트 엔진아 일해라..)
자바스크립트 엔진은 js 코드를 읽고 AST 를 만든다
이작업이 끝나면 다시 HTML 멈춘곳 부터 다시이...
다 끝나면 브라우저는 HTML 파싱의 결과물인 DOM Tree 와 CSS 파싱의 결과물인 CSSOM TREE 를 합쳐서 Render Tree 를 만들게 된다
Render Tree 가 만들어지면 브라우저는 Layout 작업을 시작하는데 말그대로 Render Tree 의 요소(노드) 들을 화면에 올바른 위치에 표시하고 배치하는 작업을 진행한다.
이후 UI Backend 가 UI 를 그리고,
노드들의 레이어를 순서대로 구성하는 Composition 단계를 거치는데
z-index 의 값에 따라 노드를 아래 또는 위에 배치하는 단계를 거친다.
우리가 생각없이 짠 코드들이 이렇게나 많은 과정을 거쳐서 사용자에게 보여진다.
결국 일은 내가하는게 아니라 브라우저가 다하는게 아닐까 ㅎㅎ..
참고문서
브라우저 렌더링 과정 >
