[새싹 프론트엔드] 브라우저 동작 방법

"브라우저가 어떻게 동작하는지 아세요?" 

 

새싹 프론트엔드 과정 첫 수업 시간에 web에 대한 기초 강의를 듣고 '브라우저의 동작 방법'에 대해 정리해보려 합니다

면접 단골 질문이기도 하니 이번 기회에 꼼꼼히 익혀 보겠습니다!

 

 

 

브라우저

 

먼저 브라우저가 무엇인지 알아보겠습니다. 브라우저는 흔히 우리가 인터넷 접속할 때 사용하는

Chrome, Safari, Firefox, Internet Explorer 등을 말합니다. 브라우저는 유저가 선택한 자원들을 렌더링 과정을

통해 유저에게 보여주게 됩니다. 

 

---

브라우저 렌더링 동작 과정

 

브라우저 렌더링 동작 과정은 크게 다섯 가지입니다.

 

1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다 (Parsing)

2. 두 Tree를 결합하여 Rendering Tree를 만든다 (Style)

3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다 (Layout)

4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다 (Paint)

5. 레이어를 합성하여 실제 화면에 나타낸다 (Composite)

 

 

 

각 단계를 좀 더 자세히 살펴보겠습니다.

 

 

Parsing

parsing 단계는 HTML 파일을 해석하여 DOM Tree를 구성하는 단계입니다.

만약 HTML에 CSS가 포함되어 있다면 CSSOM Tree 구성 작업도 함께 진행합니다.

 

Style

 style 단계에서는 파싱 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성합니다.

Render Tree는 실제로 화면에 그려질 Tree를 말합니다.

 

Layout

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

 

Paint

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

 

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.

이 과정을 통해 우리는 화면에서 웹 페이지를 볼 수 있다.

 

---

요약

 

총 과정을 풀어서 설명하면,

 

주소창에 url을 입력하고 enter를 누르면 서버에 요청이 전송됩니다.

그럼 해당 페이지에 존재하는 여러 자원들이 보내지고 

브라우저는 해당 자원이 담긴 html과 스타일이 담긴 css를 해석합니다.

이 역할을 하는 것이 렌더링 엔진입니다.

 

렌더링 엔진은 우선 html 파싱 과정을 시작하고 DOM Tree를 구축합니다.

그 다음 CSS 파싱 과정을 시작하는데 이 단계에서 CSSOM Tree를 구축하고

이 두 가지를 연결시켜 Render Tree를 만듭니다.

 

그 후 화면에 배치를 시작하고 UI 백엔드가 노드를 돌며 형상을 그립니다.

이때 빠른 브라우저 화면 표시를 위해 '배치와 그리는 과정'은 모든 정보를 한 번에 받아

한꺼번에 진행되지 않고 기다리는 동시에 일부분을 먼저 진행하는 방식으로 화면에 표시됩니다.

 

 

---

 

참고자료

• naver d2 - 브라우저는 어떻게 동작하는가
• Tecoble 블로그 - 브라우저 렌더링 과정 이해하기

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅