브라우저 렌더링 과정

이 글은 브라우저 렌더링 과정에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요!

---

브라우저(Browser)란?

브라우저, 웹 브라우저라고 불리는 이것은 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어를 말한다. 쉽게 말해 브라우저를 통해 사용자들은 영상, 이미지 등 자료들을 주고 받을 수 있고 공유도 할 수 있다. 대표적인 브라우저는 구글 크롬, 모질라 파이어폭스, 오페라, 사파리, 인터넷 익스플로어 등이 있다.

 

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원(Resource)을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML문서지만 PDF난 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

 

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

 

브라우저의 사용자 인터페이스는 서로 닮아 있다. 우선 아래의 요소들이 일반적인 인터페이스다.

 

- URI를 입력할 수 있는 주소 표시줄

- 홈, 이전, 다음 버튼

- 북마크

- 새로 고침, 중지 버튼

 

브라우저의 사용자 인터페이스는 표준 명세가 없다. 하지만, 지난 시간동안 서로의 장점을 모방하면서 현재에 이르게 되었다. 참고로 HTML5명세는 주소 표시줄, 상태 표시줄, 도구 모음 등 일반적인 요소를 제외하고 브라우저 필수 UI를 정의하지 않고 있다.

 

 

브라우저의 구조

- 1. 사용자 인터페이스

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 모든 부분.

 

- 2. 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

 

- 3. 렌더링 엔진

요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

 

- 4. 통신

HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

 

- 5. UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

 

- 6. JavaScript 컴파일러

JavaScript 코드를 컴파일하고 실행.

 

- 7. 자료 저장소

이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

 

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

 

렌더링 엔진은 HTML과 XML 문서, 이미지를 표시할 수 있다. 여기에 브라우저 확장 기능을 사용하면 PDF와 같은 다른 유형도 표시할 수 있지만, 가장 일반적인 HTML과 이미지를 CSS로 표시하는 패턴을 중심으로 포스팅 하겠다.

 

🤔다양한 브라우저 엔진

- 각 브라우저는 저마다의 렌더링 엔진이 있다. 전 세계적으로 점유율이 높은 크롬과 파이어폭스, 사파리를 예시로 들었다.

 

🤔구글 크롬(Chrome), 사파리(Safari)

- 웹킷(Webkit) 엔진

🤔모질라 파이어폭스(Firefox)

- 게코(Gecko) 엔진

 

브라우저의 렌더링 동작 과정 이미지 출처: www.google.com

브라우저 렌더링 엔진의 동작 과정

렌더링 엔진의 기본적인 동작을 크게 3단계로 나누어 보았다.

 

1. DOM 트리 구축을 위한 HTML 파싱(Parsing)

브라우저가 동작할 때 가장 먼저 HTML문서를 파싱한다.

 

2. 렌더 트리 구축

HTML문서 파싱 후, 콘텐츠 트리 내부에서 HTML태그를 DOM 트리로 구축시킨다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.

 

3. 렌더 트리 배치

위의 과정을 통해 트리 생성 과정이 끝났을 때, 배치가 진행된다. 즉 노드가 화면의 정확한 위치에 표시된다는 의미다.

 

4. 렌더 트리 그리기

UI 백엔드에서 렌더 트리의 각 노드를 가로지으면서 형상을 만드는 그리기 과정이 진행된다. 즉, 브라우저에 표시된다는 의미다.

 

참고로 렌더 트리가 모든 요소를 표시하진 않는다. 아래의 예시를 참고하자!

 

display: none

위의 속성이 설정된 노드는 어떤 공간도 차지하지 않는 특징을 가졌다. 때문에 렌더 트리를 만드는 과정에서 제외된다.

visibility: invisible

위의 속성은 비슷하게 동작하지만 요소가 보이지 않을 뿐, 공간은 차지하고 있기 때문에 렌터 트리에 포함된다.

마지막으로, 위의 과정이 점진적으로 진행되며, 렌더링 엔진은 HTML문서 파싱이 완료될 때까지 기다리는 것이 아니라, 그동안 렌더 트리 배치와 그리기 과정을 시작한다. 그렇게 하여 먼저 전송 받은 내용을 브라우저에 표시해준다.

 

🤔DOM(Document Object Model)

- 프로그래밍 언어가 페이지에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 한 마디로 DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식을 말한다.

🤔파싱(Parsing)

- 문서를 파싱한다는 의미는 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 말한다.

 

JavaScript는 어떻게 처리 될까?

JavaScript는 렌더링 엔진에서 처리되지 않고 JavaScript엔진이 처리한다. HTML파서가 동작하다 script태그를 만나게 되면 JavaScript를 실행하기 위해 DOM생성을 중지하고  제어 권한이 JavaScript엔진으로 넘어가게 된다.

 

이렇게 권한을 넘겨받게된 JavaScript엔진에서는 script태그 내의 코드나 어트리뷰트에 정의된 JavaScript파일을 로드하고 파싱과정을 진행하다. 이 과정이 완료되면 다시 HTML파서로 권한이 넘어가고 중지했던 시점으로 돌아가 DOM생성을 재개하게 된다.

 

위의 과정을 통해 우리가 알 수 있는 것은 브라우저는 동기적으로 HTML, CSS, JavaScript를 처리한다는 사실이다!!

 

정리

브라우저 동작과정! 이것만은 꼭 기억하자!!

1. 사용자가 참조하고자 하는 웹페이지를 서버에 요청한다.

ex) 주소창에 url을 입력한다.(서버에 요청이 전송된다.)

 

2. 해당 페이지에 여러 자원들이 보내진다.

3. 렌더링 엔진이 동작한다.

(HTML 파싱 > DOM트리 구축 > CSS 파싱 > 렌더 트리 생성 > 렌더 트리 화면에 배치 > UI 백엔드가 노드를 돌며 렌더 트리를 그림)

* 빠른 브라우저 화면 표시를 위해 '배치', '그리기' 과정은 페이지 정보를 모두 받을 때까지 기다리지 않는다. 자원을 전송받으면, 기다리는 동시에 일부분 먼저 진행하고 화면에 표시한다.