브라우저는 어떻게 동작하는가 (part. 03)

본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다.

https://d2.naver.com/helloworld/59361

동작 과정 예

웹킷 동작 과정

 

모질라의 게코 렌더링 엔진 동작 과정

 

웹킷과 게코가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 알 수 있다.

 

게코는 시각적으로 처리되는 렌더 트리를 '형상 트리(frame tree)'라고 부르고 각 요소를 형상(frame)이라고 하는데 웹킷은 '렌더 객체(render object)'로 구성되는 '렌더 트리(render tree)'라는 용어를 사용한다.

웹킷은 요소를 배치하는데 '배치(layout)'라는 용어를 사용하지만 게코는 '리플로(reflow)'라고 부른다.

'어태치먼트(attachment)'는 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 시각 정보를 연결하는 과정이다.

게코는 HTML과 DOM 트리 사이에 '콘텐츠 싱크(content sink)'라고 부르는 과정을 두는데 이는 DOM 요소를 생성하는 공정으로 웹킷과 비교하여 의미있는 차이점이라고 보지는 않는다.

 

---

파싱과 DOM 트리 구축

파싱은 렌더링 엔진에서 매우 중요한 과정이기 때문에 더 자세히 다룰 필요가 있다.

 

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 한다.

 

 

2+3-1의 수학 표현식을 파싱한 트리 노드

 

문법

파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. 이것을 문맥 자유 문법(문맥 무관 문법)이라고 한다. (인간의 언어는 이런 모습과는 다르기 때문에 기계적으로 파싱이 불가능)

 

파서-어휘 분석기 조합

파싱은 어휘 분석과 구문 분석이라는 두 가지로 구분할 수 있다.

 

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

 

구문 분석은 언어의 구문 규칙을 적용하는 과정이다.

 

파서는 보통 두 가지 일을 하는데 자료를 유효한 토큰으로 분해하는 어휘 분석기(토큰 변환기)가 있고 언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서가 있다. 어휘 분석기는 공백과 줄 바꿈 같은 의미 없는 문자를 제거한다.

 

 

 

 

파싱 과정은 반복된다. 파서는 보통 어휘 분석기로부터 새 토큰을 받아서 구문 규칙과 일치하는지 확인한다. 규칙에 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고 파서는 또 다른 토큰을 요청한다.

 

규칙에 맞지 않으면 파서는 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청한다. 맞는 규칙이 없는 경우 예외로 처리하는데 이것은 문서가 유효하지 않고 구문 오류를 포함하고 있다는 의미다.

 

변환

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

 

 

파싱 예

간단한 수학 언어를 정의하고 파싱 과정 확인

 

어휘

- 수학 언어는 정수, 더하기 기호, 빼기 기호를 포함한다.

구문

1. 언어 구문의 기본적인 요소는 표현식, 항, 연산자이다.

2. 언어에 포함되는 표현식의 수는 제한이 없다.

3. 표현식은 '항' 뒤에 '연산자' 그 뒤에 다른 항이 따르는 형태로 정의한다.

4. 연산자는 더하기 토큰 또는 빼기 토큰이다.

5. 정수 토큰 또는 하나의 표현식은 항이다.

 

입력된 값 2+3-1 분석하기

규칙에 맞는 첫 번째 부분 문자열은 2이다. 규칙 5번에 따르면 이것은 하나의 항이다. 두 번째로 맞는 것은 2+3 인데 이것은 항 뒤에 연산자와 또 다른 항이 등장한다는 세 번째 규칙과도 일치한다. 입력 값의 마지막 부분까지 진행하면 또 다른 일치를 발견할 수 있다. 2+3은 항과 연산자와 항으로 구성된 하나의 새로운 항이라는 것을 알고 있기 때문에 2+3-1은 하나의 표현식이 된다. 2++는 어떤 규칙과도 맞지 않기 때문에 유효하지 않은 입력이 된다.