기술면접에서 단골로 물어보는 질문이라고 한다. 비슷한 유형으로 주소창에 google.com을 입력했을 때 일어나는 일이 이와 같다.
얕게 알고 있었지만 이번 기회에 정확한 개념을 숙지하고 가야겠다.
🌐브라우저란?
우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Microsoft Edge 등을 말한다.
브라우저마다 다르지만, 브라우저는 렌더링 엔진을 가지고 있다.
Chrome과 Microsoft Edge는 Blink(블링크), Safari는 Webkit(웹킷), Firefox는 Gecko(게코)라는 렌더링 엔진을 사용한다.
💫전체적인 과정
전체적인 과정은 크게 두 가지로 나눌 수 있다.
(브라우저 검색창에 'www.google.com'을 입력한 상태)
- 데이터를 받아오는 과정
- 브라우저에 렌더링되는 과정
📚 데이터를 받아오는 과정
1. 브라우저 검색창에 'www.google.com'을 입력 후 엔터를 친다.
2. 브라우저는 캐싱된 DNS 기록을 체크한다.
3. 요청한 URL이 캐시에 없으면, ISP의 DNS 서버에서 다른 DNS 서버를 DNS Query를 통해 검색하여 IP 주소를 찾는다.
ISP(Internet Service Provider): KT, SK, LG 등
4. 브라우저가 서버와 TCP 연결을 한다.
5. 브라우저가 웹서버에 HTTP(S) 요청을 한다.
6. 서버가 요청을 처리하고, response를 생성하고 보내준다.
✨ 브라우저에 렌더링되는 과정
성능을 최적화하기 위해선 수신받은 HTML, CSS, JS파일들을 어떤 단계를 걸쳐 일어나는지를 파악한 후, 해당 과정들을 최소화하는 것이 매우 중요하다.
1. Parsing: HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.
Parsing 단계에서 HTML 파일을 해석하여 DOM Tree를 구성하게 된다.
Parsing 중 HTML에 CSS가 포함되어 있다면 CSSOM Tree 구성 작업도 함께 진행하게 된다.
2. Style: 두 Tree를 결합하여 Rendering Tree를 만든다.
Style 단계에서 DOM tree와 CSSOM Tree를 매칭시켜 Render Tree를 구성한다.
❗이때 display:none 의 경우 Render Tree에서 제외된다.
3. Layout: Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 지 노드의 정확한 위치와 크기를 계산한다.
루트부터 노드를 순회하며, 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.
4. Paint: 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.
스타일이 복잡할수록 Paint 시간도 늘어난다.
❗Reflow & Repaint
특정 액션과 이벤트에 따라 발생
(Viewport가 변경되는 경우 포함)Reflow와 Repaint를 최대한 줄여야 해당 과정들을 다시 거치지 않기때문에 성능 최적화와 연결이 된다.
Reflow Repaint를 알아보자
5. Composite: 레이어를 합성하여 실제 화면에 나타낸다.
Composite 단계에서 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.
Transform, opacity와 같은 요소들을 의미한다.
참고 자료
의외로 신입이 모르는 것! - 브라우저 렌더링 과정
브라우저의 렌더링 과정
브라우저 렌더링 과정 이해하기
주소창에 www.google.com을 입력했을 때 일어나는 과정
마이크로소프트 엣지와 구글 크롬의 7가지 차이점
