[브라우저 동작원리] 브라우저는 어떻게 동작하는가?

브라우저의 주요 기능

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

 

브라우저의 기본 구조

• 사용자 인터페이스 - 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제와한 나머지 부분이다.
• 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
• 렌더링 엔진 - 요청한 콘텐츠를 표시 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시해준다.
• 통신 - HTTP 요청과 같은 네트워크 호출에 사용된다. 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.
• UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 이고 플랫폼에서 명시하지 않은 일반적인 인터페이스로서 OS 사용자 인터페이스 체계를 사용한다.
• 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
• 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

 

렌더링 엔진

사용자가 요청한 내용을 서버로부터 받아 브라우저 화면에 표시하는 역할을 한다. 

1. 표시할 수 있는 것은 HTML 및 XML 문서 그리고 이미지를 표시할 수 있다.
2. 플러그인이나 브라우저마다 확장 기능을 이용해 PDF와 같은 유형도 표시할 수 있다.
3. 사파리, 크롬은 웹킷 엔진을 사용한다.
4. 동작원리 
   • HTML 문서를 파싱 > 브라우저 화면에 렌더링 하기 위해 다루기 쉬운 구조로 바꿈 > CSS 파일 파싱 >
     렌더 트리 구축 > 렌더 트리 배치 > 렌더 트리 그리기

• 스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 또 다른 트리를 생성한다.
• 화면에 표시하기 위한 위치, 크기, 그리기 순서 저장을 위한 별도의 트리 구조(렌더 트리)가 필요한다.
• 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
• 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.

출처

• NAVER D2