[프론트엔드] 브라우저 구조/ 브라우저 원리/ 브라우저 렌더링 과정

소개

오늘은 프론트엔드 개발자라면 꼭 알아야 할 브라우저의 구조, 브라우저의 원리, 브라우저의 렌더링 과정에 대해 알아보도록 하겠습니다.

사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등을 가리킵니다.
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
렌더링 엔진 - 요청한 콘텐츠를 표시합니다. 예를 들어 HTML을 요청하면 HTML을 파싱하여 화면에 표시합니다. 사파리와 크롬은 웹킷(Webkit) 엔진을 사용합니다.
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행합니다.

4) 브라우저의 동작원리 (검색창에 www.google.com을 검색하면?)

사용자가 브라우저를 통해 URL 주소(www.google.com)를 입력합니다.
DNS 서버가 DNS 쿼리로 IP 주소를 찾습니다.
IP 주소와 URL 정보는 HTTP 프로토콜을 사용해 HTTP 요청 메시지를 생성합니다.
해당 서버와 TCP 연결을 통해 브라우저가 웹서버에 HTTP 요청을 보냅니다.
웹서버는 HTTP 응답 메시지를 생성해 사용자 컴퓨터로 전송합니다.
HTTP 응답 메시지는 HTTP 프로토콜을 이용해 웹 페이지 데이터로 변환됩니다.

=> 즉, 브라우저는 사용자가 선택한 자원(Resource)을 서버에 요청(Request)하고, 서버로부터 받은 응답(Response)을 브라우저에 렌더링합니다.

5) 브라우저 렌더링 정의 및 과정

렌더링이란 브라우저가 유저가 선택한 자원을 서버로부터 받아와 유저에게 받아와 보여주는 것을 말합니다. 브라우저의 렌더링 과정은 다음과 같습니다.

브라우저가 서버에 필요한 리소스를 요청합니다.
HTML, CSS 파일을 파싱해서 각각 tree 를 만듭니다.
DOM tree 와 CSSOM tree를 결합하여 Render tree를 만듭니다.
Render tree 에서 위치와 크기를 계산합니다. (Layout)
Render tree 의 각 노드를 실제 픽셀로 변환해서 화면에 그려냅니다. (Paint)
그려진 layout을 합성하는 과정입니다. (Composite)

=> Layout과 Paint 수를 줄이고 Composite layer 작업만 수행하면 최대한 연산작업을 줄일 수 있습니다.

+ DOM tree와 Render tree의 차이점

DOM tree는 뷰포트에 무엇을 랜더링할지 결정하기 위해 사용되는 것입니다. 반면에 Render tree는 DOM tree+CSSOM tree을 합친 것이며 뷰포트에 무엇을 랜더링할지 결정하는 최종적인 트리입니다. 실제로 브라우저에서 랜더링되는 내용과 레이아웃 정보를 포함하고 있습니다. (head 태그, meta 태그 display:none 같이 실질적으로 브라우저의 보이지 않는 영역은 제외됩니다. )