[Web] 웹 브라우저 렌더링

한호성·2022년 6월 8일

웹 브라우저 렌더링

브라우저 개념 및 렌더링 동작과정

Web Browser 란

우리가 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox 등등을 우리는 웹 브라우저라 부른다. 웹 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서이고 때로는 PDF,이미지같은 다른 형태일 수 있다. 자원의 주소는 URI (Uniform Resource Identifier)에 의해 정해진다.

브라우저는 HTML 과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다. 이 명세는 웹 표준 기구 w3c에서 정한다. 과거에는 브라우저들이 일부만 명세에 따라 구현하고, 각 브라우저 마다 다르게 표현함으로써, 웹 제작자에게 호환의 문제를 주었다. 최근에는 대부분의 브라우저가 표준 명세를 따른다.

브라우저의 사용자 인터페이스 기본 요소들

URI를 입력할 수 있는 주소 표시줄
이전 버튼과 다음 버튼
북마크
새로고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지버튼
홈버튼

브라우저의 기본 구조

사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼/ 북마크 메뉴 등 요청한 페이지를 제외한 나머지 모든 부분
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 - 요청한 콘텐츠를 표시, EX ) HTML 요청시 HTML, CSS 파싱하여 화면에 표시함.
통신 - HTTP 요청과 같은 네트워크 호출에 사용됨.
(플랫폼 독립적인 인터페이스 이고, 각 플랫폼 하부에서 실행됨 -> 각 브라우저마다 다르다는 말일까? 아직 이해 안됨)
UI백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용 (아직 이해 X)
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
자료 저장소 - 이 부분은 자료를 저장하는 계층 - 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다 . HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있다. ( 아직 이해 X )

렌더링 엔진(크롬,사파리,파이어폭스)

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다.

파이어폭스는 모질라에서 만든 게코(Gecko) 엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다.

웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진인데 애플이 맥과 윈도우에서 사파리 브라우저를 지원하기 위해 수정을 했다.

동작과정

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작한다.

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

렌더 트리 생성이 끝나면 배치가 시작되는데 이 것은 노드가 화면의 정확한 위치에 표시되는 것을 의미한다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어내는 그리기 과정이다.

일련의 과정들이 점진적으로 진행된다. HTML 파싱을 다 할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.

각 브라우저가 사용하는 엔진마다 다르게 동작하는것을 알 수 있다.

동작과정 세부사항

1. 파싱과 DOM 트리구축

기본적인 파싱 개념..? 웹 브라우저 파싱의 기본설명하는 내용

파싱

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱결과는 노트 트리로 나타내진다.

파싱은 어휘분석과 구문 분석 두 가지로 구분가능하다.

 1. 어휘 분석은 자료를 토큰으로 분해하는 과정이다. 토근은 유효하게 구성된 단위의 집합체로 용어집이라고 할 수 있다. (사전에 등장하는 모든 단어에 해당한다.)

 2. 구문 분석은 언어의 구문규칙을 적용하는 과정이다.
 
파서는 자료를 유효한 토큰으로 분해하는 어휘분석기 언어 구문규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서가 있다.

변환
파서 트리는 최종 결과물이 아니다. 파싱은 보통 문서를 다른 양식으로 변환하는데 컴파일이 하나의 예가 된다. 소스 코드를 기계 코드로 만드는 컴파일러는 파싱 트리 생성 후 이를 기계 코드 문서로 변환한다.

HTML 파서

HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.

HTML 문법 정의

HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다.

DOM

"파싱 트리"는 DOM 요소와 속성 노드의 트리로서 출력 트리가 된다. DOM 은 문서 객체 모델의 준말로, HTML 문서의 객체 표현이고, 외부를 향하는 자바스크립트와 같은 HTML 요소의 연결 지점이다. 트리의 최상위 객체는 문서 (Document) 이다. -> (DOM 에 대해서는 따로 다시 정리해보자)

예시

파싱 알고리즘

알고리즘 토큰화 & 트리 구축 두 단계로 이루어진다.

토큰화

토큰화는 토큰을 인지해서 트리 생성자로 넘기고, 다음 토큰을 확인하기 위해 다음 문자 확인한다. 입력의 마지막까지 이 과정을 반복

예시)

 <html>
   <body>
      Hello world
   </body>
</html>

초기 상태는 "자료 상태" 이다. < 문자를 만나면 상태는 "태그 열림 상태"로 변한다. a 부터 z까지의 문자를 만나면 "시작 태그 토큰"을 생성하고 상태는 "태그 이름 상태"로 변하는데 이 상태는 > 문자를 만날 때까지 유지한다. 각 문자에는 새로운 토큰 이름이 붙는데 이 경우 생성된 토큰은 html 토큰이다.

'>'문자에 도달하면 현재 토큰이 발행되고 상태는 다시 "자료 상태"로 바뀐다. 태그는 동일한 절차에 따라 처리된다. 지금까지 html 태그와 body 태그를 발행했고 다시 "자료 상태"로 돌아왔다. Hello World의 H 문자를 만나면 문자 토큰이 생성되고 발행될 것이다. 이것은 종료 태그의 < 문자를 만날 때까지 진행된다. Hello World의 각 문자를 위한 문자 토큰을 발행할 것이다.

다시 "태그 열림 상태"가 되었다. / 문자는 종료 태그 토큰을 생성하고 "태그 이름 상태"로 변경 될 것이다. 이 상태는 > 문자를 만날 때까지 유지된다. 그리고 새로운 태그 토큰이 발행되고 다시 "자료 상태"가 된다. 또한 동일하게 처리될 것이다.

트리 구축 알고리즘

트리 구축 단계의 입력 값은 토큰화 단계에서 만들어지는 일련의 토큰이다.

2. CSS 파싱

웹킷 CSS 파서

웹킷은 CSS 문법 파일로부터 자동으로 파서를 생성하기 위해 플렉스와 바이슨 파서 생성기를 사용한다. 파서 소개에서 언급했던 것처럼 바이슨은 상향식 이동 감소 파서를 생성한다. 파이어폭스는 직접 작성한 하향식 파서를 사용한다. 두 경우 모두 각 CSS 파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙 객체는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.

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

스크립트

HTML5는 스크립트를 비동기(asynchronous)로 처리하는 속성을 추가했기 때문에 별도의 맥락에 의해 파싱되고 실행된다.

예측 파싱

웹킷과 파이어폭스는 예측 파싱과 같은 최적화를 지원한다. 스크립트를 실행하는 동안 다른 스레드는 네틍크로부터 다른 자원을 찾아 내려받고 문서의 나머지 부분을 파싱한다. 자원을 병렬로 연결하여 받을 수 있고 전체적인 속도를 개선한다.

스타일 시트

스타일 시트는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않는다. 하지만 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제가 된다. 파이어폭스 같은 경우 파싱 중인 스타일 시트가 있는 경우 모든 스크립트의 실행을 중단하고, 웹킷은 로드되지 않은 스타일 시트 가운데 문제가 될만한 속성이 있을 때에만 스크립트를 중단한다.

3. 렌더 트리 구축

DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다. 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위해서이다.
(파이어폭스는 렌더트리의 구성요소를 FRAME(형상) 웹킷은 Renderer(렌더러 객체)

렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있다.

웹킷 렌더러의 기본 클래스인 RenderObject는 다음과 같이 정의되어 있다.

class RenderObject { virtual  
    void layout(); virtual
    void paint(PaintInfo); virtual
    void rect repaintRect();
    Node * node; //the DOM node
    RenderStyle * style; // the computed style
    RenderLayer * containgLayer; //the containing z-index layer
}

각 렌더러는 css 명세에 따라 노드의 css박스에 부합하는 사각형을 표시한다. 렌더러는 너비 높이 그리고 위치 같은 기하학적 정보를 포함한다.

#cf) DOM 트리와 렌더 트리의 관계

렌더러는 DOM 요소에 부합하지만, 1대1 대응 하는 관계가 아니다. EX) "Head" 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다. 또한 Display="none"값이 할당된 요소는 트리에 나타나지 않는다.(hidden 속성값은 나타난다)

트리를 구축하는 과정

웹킷에서 스타일을 결정하고 렌더러를 만드는 과정을 attachment라고 부른다. dom 노드에서 attach 메서드가 있다. attachment 동기적인데 dom 트리에 노드를 추가하면서 새 노드의 attach 메서드를 호출한다.

html /body 태그를 처리함으로써 렌더 트리 루트를 구성한다. 트리의 나머지 부분은 dom 노드를 추가함으로써 구축된다.

~~이후의 추가적인 그리기 및 배치에 대한 상세설명은 따로 필요할 때 정리해보자~~