본문 바로가기

Front-End/WEB

브라우저는 어떻게 동작 하는가?

소개


 우리가 가장 많이 사용하는 웹브라우저에서 www.naver.com 입력시 어떤 과정을 거쳐 네이버 메인화면을 보여주는지에 대해 알아보자. 이 글에서는 오픈소스 브라우저에 대해 알아볼 것이다.


브라우저의 주요 기능


 브라우저의 주요 기능은 사용자가 자원을 요청하고 그 자원을 브라우저에 표시해주는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 형태일 수도 있다. 자원의 주소는 URI에 의해 정해진다.


브라우저는 HTML과 CSS 명세에 따라 HTML을 해석하여 브라우저에 그려준다. 초창기에는 해당 명세를 만드는 W3C(World Wide Web Consortium)을 잘 따르지 않아 호환성 문제를 심각하게 겪었지만 최근에는 대부분의 브라우저가 명세를 따르고 있다.


브라우저의 사용자 인터페이스는 다음과 같은 요소들이 일반적이다.


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

    • 이전, 다음 버튼

    • 홈 버튼

    • 북마크

    • 새로고침, 중단 버튼

HTML5 명세는 주소 표시줄, 상태표시줄과 같은 일반적인 요소를 제외하고는 브라우저의 필수 UI를 정의하지 않았다.


브라우저의 기본 구조


1) 사용자 인터페이스 - 위에서 살펴본 요소들

 2) 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어

 3) 렌더링 엔진 - HTML 요청시 HTML과 CSS를 분석하여 화면에 표시
 ( 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 즉 독립된 프로세스로 처리됨 )

 4) 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼에 독립적이고 각 플랫폼 하부에서              실행 됨

 5) 자바스크립트 해석기 - 자바스크립트 코드 해석, 실행

 6) UI 백엔드 - OS Native UI를 사용하는 경우를 가리킴

 7) 자료 저장소 - 자료 저장 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에                          저장할 필요가 있음.


 렌더링 엔진 동작 과정




 렌더링 엔진은 HTML 문서의 태크들을 파싱하여 DOM 노드로 변환을 한다. 그 다음 외부 CSS파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 구칙은 "렌더 트리" 라고 부르는 또 다른 트리를 생성한다. 


 렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.


 렌더 트리가 생성된 후 각 노드가 정해진 위치에 표시되는 이를 배치라 한다. 


 렌더링 엔진은 HTML 전체가 파싱될 때까지 기다리지 않고 배치과 그리기 과정을 시작한다. 




 동작 과정 예


 



'Front-End > WEB' 카테고리의 다른 글

Client-Server 웹 개발 기술의 역사  (0) 2017.06.06
브라우저는 어떻게 동작 하는가?  (0) 2017.05.12
HTTP 스크립팅(AJAX)  (0) 2017.03.31
JSON vs CSS??  (0) 2017.03.31