인터넷 - 브라우저와 동작 원리

브라우저의 주요 기능과 기본 구조

브라우저는 웹에 접근하기 위한 소프트웨어로 크롬, 파이어폭스, 사파리, 엣지 등 여러가지가 있다. 구글에 접속하기 위해 크롬을 켠 후 주소 입력창에 www.google.com을 입력하면 구글에 접근하게 되는데, 이 주소를 URI(Uniform Resource Identifier)라고 한다. URI는 HTML, CSS, JavaScript, PDF, 이미지 파일 등 다양한 자원에 접근할 수 있는 서버 주소이다. 브라우저는 이 자원들을 해석해 화면에 표시한다. 

• 사용자 인터페이스: 요청한 페이지를 표시하는 부분 외 나머지 모든 부분으로, URI 주소 입력 및 표시창, 이전 버튼과 다음 버튼, 북마크, 새로고침과 정지 버튼, 홈 버튼 등으로 구성되어있다. 약속된 표준 명세서가 없지만 서로를 모방하여 대부분 비슷하게 생겼다고 한다. 
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
• 렌더링 엔진: HTML, CSS 등을 서버에서 받아 파싱을 하여 요청한 콘텐츠를 표시한다. 
• 통신: HTTP 요청과 같은 네트워크 호출을 하는 브라우저 내부 계층이다.
• 자바스크립트 해석기: 자바스크립트 코드를 해석하여 동적인 화면 구성을 돕는다. (Chrome V8 엔진 등)
• UI 백엔드: UI 구동을 돕는다. HTML에서 <button>이나 <input> 같은 태그를 사용할 때, 따로 스타일을 지정하지 않아도 브라우저는 이에 맞는 UI화면을 그린다. 이러한 요소들은 해당 서버나 플랫폼에 명세하지 않은 일반적인 인터페이스이며, OS 사용자 인터페이스 체계를 사용한다.
• 자료 저장소: 쿠키 같은 종류의 자료를 저장하는 계층으로, 웹 데이터 베이스이다. 사용자가 오프라인 상태여도 웹이 동작하도록 한 뒤, 네트워크가 다시 연결되면 데이터를 다시 동기화할 수 있다. 성능 향상을 위해 동일한 자원에 대한 중복 요청을 줄일 수 있다. 대신 데이터가 취약하고 여러 클라이언트가 액세스할 수 없으므로, 중요하지 않은 데이터 위주로 사용하는 것이 권장된다.

 

브라우저의 호환성

브라우저는 HTML, CSS 뿐만 아니라 이미지나 동영상 파일도 표시할 수 있다. 확장자나 형태가 다른 다양한 데이터들과 상호작용이 가능한 이유는 웹 표준 덕분이다. 웹 표준이란 웹에서 표준적으로 사용되는 기술과 규칙을 말한다. 웹 상에서 사용되는 모든 파일은 이러한 웹 표준을 가지게 되어 브라우저 내에서 어떠한 데이터 및 파일과도 상호작용이 가능하다. 

 

웹 표준은 W3C(World Wide Web Consortium)라는 웹 표준화 기구에 의해 명세가 되었다. 

 

렌더링 엔진

렌더링은 서버로 부터 받은 파일을 화면에 표시하는 것을 말하는데, 렌더링 엔진이 이 역할을 수행한다. 크롬과 사파리의 경우 최초 리눅스 플랫폼에서 동작하기 위해 만들어진 오픈소스인 WebKit이라는 엔진을 사용한다. 파이어폭스는 Gecko를 사용.

 

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데, 문서의 내용은 보통 8kb 단위로 전송된다.  

렌더링 엔진의 기본적인 동작 과정

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성한다. 렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다. 렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다. 일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요하다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

 

웹킷 렌더링 엔진 동작 과정

게코 렌더링 엔진 동작 과정

 

파싱과 DOM 트리 구축

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다.

 

파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. 이것을 문맥 자유 문법이라고 한다.

 

파싱은 어휘 분석과 구문 분석이라는 두 가지로 구분할 수 있다. 어휘 분석은 자료를 토큰으로 분해하는 과정이다. 토큰은 유효하게 구성된 단위의 집합체로 용어집이라고도 할 수 있는데 인간의 언어로 말하자면 사전에 등장하는 모든 단어에 해당된다. 구문 분석은 언어의 구문 규칙을 적용하는 과정이다.

 

HTML 파싱

• HTML 파서는 HTML 마크업을 파싱 트리로 변환한다. 
• XML에 반하여 HTML은 "유연한" 문법이다.
• DOM은 문서 객체 모델(Document Object Model)의 준말이다.
• DOM은 마크업과 1:1의 관계를 맺는다.

 

CSS 파싱

• CSS는 문맥 자유 문법이다.
• CSS 파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다.

 

스크립트와 스타일 시트의 진행 순서

스크립트

• 스크립트가 실행되는 동안 문서의 파싱은 중단된다.
• 스크립트가 외부에 있는 경우 우선 네트워크로부터 자원을 받을 때까지 파싱은 중단된다.
• 스크립트를 "지연(defer)"으로 표시하게 되면 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후에 스크립트가 실행된다.
• HTML5는 스크립트를 비동기(asynchronous)로 처리하는 속성을 추가했기 때문에 별도의 맥락에 의해 파싱되고 실행된다.

예측 파싱

• 웹킷과 파이어폭스는 예측 파싱과 같은 최적화를 지원한다.
• 스크립트를 실행하는 동안 다른 스레드는 네트워크로부터 다른 자원을 찾아 내려받고 문서의 나머지 부분을 파싱한다. 이런 방법은 자원을 병렬로 연결하여 받을 수 있고 전체적인 속도를 개선한다.
• 예측 파서는 외부 스크립트, 외부 스타일 시트와 외부 이미지와 같이 참조된 외부 자원을 파싱할 뿐이다.

스타일 시트

• 스타일 시트는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단할 이유가 없다.
• 그러나 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제가 된다 스타일이 파싱되지 않은 상태라면 스크립트는 잘못된 결과를 내놓기 때문에 많은 문제를 야기한다.
• 파이어폭스는 아직 로드 중이거나 파싱 중인 스타일 시트가 있는 경우 모든 스크립트의 실행을 중단한다. 한편 웹킷은 로드되지 않은 스타일 시트 가운데 문제가 될만한 속성이 있을 때에만 스크립트를 중단한다.