브라우저 동작 원리 알아보기

들어가며

개발자는 HTML, CSS, JavaScript를 사용해 사용자에게 보여줄 페이지를 만들어 낸다. 그런데 프로그래밍을 하면서 어떤식으로 브라우저 화면에 페이지가 보여지는지에 대하여 생각해 본 적은 없었다. 입력 주소창에 URI를 입력하고 페이지로 이동했을 때 화면을 보여주고 다른 주소를 검색하면 또 다른 페이지를 보여주게 되는데 어떠한 원리로 브라우저가 웹 페이지를 표현하는 것 일까??🤔 이번 포스팅은 브라우저 작동 원리를 공부하며 배운내용을 정리해보겠다.

 

📌 브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 응답으로 HTML문서를 읽고 해석한 후 화면에 렌더링 한다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.

💡 자원 : 보통 HTML 문서지만 PDF, 이미지 등의 여러 형태를 뜻한다.

 

📌 브라우저 사용자 인터페이스

 

대부분의 브라우저 사용자 인터페이스는 다음과 같다

 

1) URI를 입력할 수 있는 주소창

2) 이전·다음페이지 이동 버튼

3) 북마크

4) 새로고침 버튼, 페이지 로드 중지 버튼

5) 홈버튼

 

📌 브라우저 기본 구조

 

 

브라우저 기본 구조

 

사용자 인터페이스 

위에서 언급한 사용자 인터페이스를 통해 브라우저를 동작시킨다.

 

브라우저 엔진 

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하며, 브라우저 엔진은 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소를 말한다.

 

렌더링 엔진 

렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시한다.

→ Gecko : 파이어폭스는 직접 만든 게코엔진을 사용
→ Webkit : 사파리, 크롬 (크롬은 버전 28부터 웹킷 엔진을 복제한 자체 엔진 블링크 사용)렌더링 엔진 - 렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시(HTML, CSS, 기타 자원을 파싱해 화면에 표시)

 

 

Webkit 렌더링 엔진

 

통신 

HTTP 요청과 같은 네트워크 호출에 사용하는 브라우저 내부 계층

 

UI 백엔드 

기본적인 UI 장치를 말한다. 예를 들어, <Button>이나 <Input>태그를 쓸 때, 이 태그에 관한 스타일을 따로 적용하지 않아도 브라우저는 이에 맞는 UI화면을 그리게 된다. 이러한 요소들은 해당 서버나 플랫폼에 명시하지 않은 일반적인 인터페이스이며, OS 사용자 인터페이스 체계를 사용한다.

 

데이터 스토리지

자료를 저장하는 계층이다. Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역이다.

 

자바스크립트 해석기 

자바스크립트 코드를 해석하고 실행

 

📌 렌더링 엔진 동작 과정

일반적으로 렌더링이라 하면 어떠한 작업을 수행한 후 화면에 그려주는 것을 의미하는데

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다. 브라우저마다 렌더링 엔진이 다르기 때문에 동일한 소스코드를 각 브라우저에서 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드의 버전도 다르기 때문에 크로스 브라우징 이슈가 발생하곤 한다. 

렌더링 엔진 동작 과정

 

1) 브라우저 주소창에 url을 입력하면 브라우저는 DNS(Domain Name System)을 운영하는 서버를 통해 IP주소를 받아온다 그리고 브라우저는 IP주소를 이용해서 서버에 요청을 보낸다. 서버로 부터 받은 HTML과 CSS 파일을 파싱하고 DOM Tree(Document Object Model)와 CSSOM Tree(CSS Object Model)을 만든다.

 

2) DOM Tree와 CSSOM Tree를 바탕으로 화면에 그리기 위한 Render Tree를 만든다. Render Tree는 스타일 정보가 설정되어 있으며 실제 화면에 표시되는 노드들로만 구성되어 있다.

 

3) Render Tree를 바탕으로 Viewport 내에서 각 노드들의 정확한 위치와 크기(Layout)를 계산한다.

 

4) Layout 계산이 완료되면 실제 화면이 그려지는데 Render Tree를 바탕으로 실제 픽셀값을 채워넣는 Paint가 발생한다.

 

📌 React의 Virtual DOM

DOM에 변화가 생기면, 렌더트리를 재생성하고(모든 요소들의 스타일이 다시 계산) 레이아웃(Reflow)을 만들고 페인팅(Repaint) 과정이 다시 반복, 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생한다. 이 뜻은 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다. 뷰에 변화가 있다면, 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 결과를 실제 DOM 으로 딱 한번만 전달해준다. 이로 인해 브라우저 내에서 발생하는 연산의 횟수를 줄이면서 성능 개선이 가능하다.

 

📌 CSS, JavaScript 의 HTML 문서내 위치

1) HTML 상단에 정의

문서를 파싱해 DOM Tree로 변환을 해도 스타일정보가 없으면 Render Tree를 생성할 수 없기 때문에 스타일 정보를 취득을 앞당기기 위해 태그 사이에서 사용하는 것이 Render Tree 생성 시점을 앞당겨 준다.

 

2) script 태그는 body 태그 최하단에 정의

파일 내에 위치하게 되면 파서가 파싱을 중지하고 스크립트파일을 읽는다. 스크립트 파일이 많고 용량이 크면 읽는데 많은 시간이 소요되고 브라우저 렌더링이 늦어져 사용자는 웹페이지가 느리다고 생각해 UX(유저 경험)에 영향을 주며 스크립트 내에 에러가 발생할 경우 렌더 후 동작이 안되는 경우가 발생할 수 있다.

📌 참고

[네이버 D2] - 브라우저는 어떻게 동작하는가?