브라우저 주소창에 google.com을 입력했을 때 어떤 일이 일어날까?

📚 공부하게 된 계기

어느 날 브라우저 주소창에 google.com을 입력했을 때 어떤 일이 일어나는지에 대해 설명할 수 있냐는 질문을 받았고

나는 이 질문에 대해 명확하게 대답하기 위해 어떤 일이 일어나는지 찾아보게 되었다.

🐌 브라우저의 렌더링 동작 과정 

 

위 그림은 브라우저의 렌더링 과정을 간단하게 나타낸 그림이다.

간단하게 설명해 보자면,

우리가 google.com이라고 검색했을 때 해당주소로 리소스 요청이 전송된다. 그러고 나서 서버는 루트 폴더에 존재하는 정적 파일인 index.html 파일로 응답을 한다.

 

응답받은 HTML 파일은 각 단계(Parsing -> Style -> Layout -> Paint -> Composite)를 거치며 우리가 알고 있는 모습으로 웹 브라우저에 거치게 되는데 단계별로 어떤 일이 일어나는지 알아보자!

♾️ Parsing

HTML 파일을 해석하여 DOM Tree, CSSOM Tree 를 구성

 

서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트라 이 문서를 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 한다.

브라우저의 렌더링 엔진을 통해 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.

 

DOM TREE 생성 과정

 

이 때 위 그림과 같은 과정을 통해 생성하게 되는데,

1. 서버에서 2진수로 변환된 HTML 파일을 받아온다.

2. 2진수 형태로 온 문서를 meta태그에 지정된 인코딩 방식을 기준으로 문자열로 변환된다.

3. 문자열로 변환된 HTML 문서를 읽어 들여 코드의 최소 단위인 토큰으로 분해한다.

4. 토큰들을 객체로 변환하여 노드를 구성한다. 이 노드들이 DOM을 구성하는 기본 요소가 된다.

 

이 노드들을 트리 자료구조로 구성된게 DOM Tree라고 하는 것이고, 이렇게 HTML 파일을 해석하여 DOM Tree를 구성하는 것을 Parsing이라고 한다.

이때  HTML 파일에 CSS 가 포함되어 있다면 같은 방식으로 CSSOM Tree 구성 작업도 진행한다.

💅 Style

DOM Tree와 CSSOM Tree를 매칭시켜 Render Tree를 구성

 

Style 단계에서는 Paring 단계에서 생성된 DOM과 CSSOM을 매칭시켜 Render Tree로 구성한다.

 

DOM + CSSOM = Render Tree !!!

 

Render Tree 란 실제로 화면에 그려지는 모습을 뜻한다.

이 때 CSS  속성 중 visibility: hidden 은 요소가 공간을 차지하고 눈에 보이지만 않기 때문에 Render Tree에는 포함되고, display: none 같은 경우는 Render Tree에서 제외되는 특성을 가지고 있다.

🔖 Layout

Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 위치와 크기를 계산

 

Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 각 요소의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.

% 와 같이 상대적인 측정값은 화면에서 픽셀로 변환된다.

🎨 Paint

Layout 단계에서 계산된 Render Tree의 노드를 화면상의 실제 픽셀로 변환

 

 Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상에 실제 픽셀로 변환한다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

🔄 Composite

Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냄

마치며

이렇게 브라우저가 화면에 렌더링 되는 과정을 알아보았다.

간단하게 알아봤지만, 큰 흐름을 알 수 있는 계기가 되었고 누군가 물어본다면 자신 있게 말해주자!

---

 

참고

 

모던 자바스크립트 Deep Dive

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

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

https://d2.naver.com/helloworld/59361