브라우저 동작방식 / 주소창에 url을 입력했을때 일어나는 일

브라우저 창에 url을 입력했을때

보통 어떤 내용을 검색하기 위해 브라우저 창에 url을 입력합니다. 이때 내부적으로 이루어지는 일을 살펴봅니다.

브라우저에서 동작하는 과정을 알아보기 전에 DNS에 대해 먼저 알아야 합니다.

 

DNS 서버로 부터 서버 IP 조회

구글 사이트(google.com)에 접속한다고 가정해봅시다. 브라우저 주소창에 https://google.com을 검색할 것 입니다.
브라우저는 화면을 그리기 위해 서버로부터 HTML, CSS, JS, 이미지 등의 리소스 파일들을 가지고 오려고 할 것입니다.

 

하지만 브라우저는 입력받은 url(https://google.com)로는 서버의 ip를 주소를 알 수 없기 때문에, DNS 서버에 요청하여 서버의 ip 주소(예: 13.123.55.23)를 가지고 옵니다.

 

정리하면, DNS 서버는 요청받은 url에 매핑되는 (실제로 접근 가능한) IP 주소를 가지고 있습니다. url은 사용자가 쉽게 이해할 수 있도록 문자로 표현된 주소라고 생각하면 됩니다.

 

Render Tree 생성 단계

브라우저는 화면을 그리기위해 필요한 HTML, CSS, JS 등의 파일들을 가지고 옵니다. 이때 Transport 계층 protocol인 TCP를 통해 서버와 연결을 시작하고, HTTP 또는 HTTPS 프로로콜을 통해 웹 리소스들을 가지고 오게 됩니다.

 

서버로부터 받은 HTML 파일을 파싱(parsing)하여 DOM Tree를 생성하고, CSS 파일도 파싱하여 CSSOM Tree를 생성합니다. 생성된 2개의 트리를 합쳐 Render Tree를 생성합니다.

• DOM: Document Object Model
• CSSOM: CSS Object Model

DOM Tree + CSSOM Tree = Render Tree

 

Layout 단계

이후 뷰포트에 각 노드들의 정확한 위치와 크기를 계산합니다. 이때 디바이스의 크기에 따라 뷰포트 크기가 다르기 때문에, 상대적인 위치, 크기 값(vw, vh)은 pixel로 변환이 됩니다.

 

Paint 단계

정확한 위치와 크기가 계산이 완료되면, 브라우저에 painting을 시작 합니다. 이때 스타일이 복잡할 수록 paint 시간은 늘어날 수 있습니다.

 

Composition 단계

paint 단계가 완료되면, 노드들의 레이어(z-index)에 따라 앞 뒤 순서대로 구성하는 Composition 단계가 이루어집니다.

 

Reflow & Repaint

Reflow

어떤 이벤트에 의해 html 요소의 크기나 위치가 변경이되면 layout 단계를 다시 거쳐 노드들의 위치, 크기 값을 계산합니다. 이러한 과정을 Reflow라고 합니다.

 

쉽게 생각하면 노드들의 위치, 크기가 변경되면 Reflow가 발생한다고 생각하면 됩니다.

 

Repaint

Reflow 이후 Repint 작업이 이루어져야 화면에 변화가 생깁니다. 단어에서도 알 수 있듯이 Repaint는 다시 paint 하는 과정을 말합니다.

 

위치 또는 크기가 변경되는 것이 아닌 색상, 또는 visibility와 같은 값이 변경되는 경우는 Reflow 없이 Repaint 과정만 발생하게 됩니다.

 

요약

1. 사용자가 브라우저 창에 주소를 입력한다.
2. 브라우저는 DNS 서버로 부터 해당 url에 매핑된 ip 주소를 가지고 온다.
3. 브라우저는 서버와 TCP를 통해 HTML, CSS, JS, 이미지 등 화면을 그리기 위해 필요한 리소스 파일들을 가지고 온다.
4. 브라우저는 HTML 파일을 파싱하여 DOM Tree를 생성하고 CSS 파일을 파싱하여 CSSOM Tree를 생성한다.
5. 중간에 Javascript 코드를 만나게 되면 Javascript를 실행합니다.
6. 만들어진 DOM Tree와 CSSOM Tree를 합쳐 Render Tree를 생성합니다.
7. Layout 단계에서 뷰포트에 각 노드들의 정확한 위치와 크기를 계산합니다.
8. 계산된 값으로 Painting을 합니다.

 

전체 브라우저 렌더링 과정