이번 포스트에서는 브라우저가 화면을 렌더링 하는 과정에 대하여 다루어 집니다. 렌더링 과정을 이해하면 웹페이지의 렌더링 최적화에 도움이 될 수 있겠죠? 렌더링 최적화 방법은 Critical Rendering path 에서 다루어 집니다.

브라우저 구조

브라우저 렌더링 과정을 이야기하기 전에 브라우저의 구조를 잠시 살펴보겠습니다.

• User Interface : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
• Browser Engine : User Interface 와 Rendering Engine 사이의 동작을 제어
• Rendering Engine : 요청한 콘텐츠를 표시, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
• Networking : HTTP 요청과 같은 네트워크 호출에 사용됨
• Javascript Interpreter 또는 Javascript Engine : 자바스크립트 코드를 해석하고 실행함. 크롬에서는 V8 엔진을 사용함
• Display Backend : 기본적인 위젯(콤보 박스 등...)을 그림
• Data Persistence : Local Storage, 쿠키 등 클라이언트 사이드에서 데이터를 저장하는 영역

구조는 브라우저마다 조금씩 다를 수 있습니다.

파이어폭스 브라우저

크롬 브라우저

*파이어폭스 브라우저와 크롬 브라우저의 구조는 위의 그림과 같이 차이가 있습니다. 이번 포스트에서는 브라우저의 구조에서 **렌더링 엔진(Rendering Engine)*에 대해 이야기할 것입니다.

렌더링 엔진

렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 나타내는 일입니다. HTML, CSS, JavaScript 등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀 단위로 나타냅니다.