기술 면접 실습에서 "link태그는 head의 자식요소로, script태그는 body태그가 끝나기 직전에 위치하는 이유는 무엇인가"에 대한 답변을 준비하다가, 파싱과 렌더링이 무엇인지 궁금했고, 브라우저의 기본 동작 과정에 대해 알아보게 되었다.

브라우저의 주요 구성 요소

1. 사용자 인터페이스
   사용자 인터페이스는 페이지에서 사용자가 요청한 부분을 제외한 모든 부분을 말한다. 예를 들면, 홈버튼, 뒤로가기, 앞으로가기, 새로고침, 북마크 등을 포함하는 것이 사용자 인터페이스이다.

2. 브라우저 엔진
   브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 역할을 한다.

3. 렌더링 엔진
   렌더링 엔진은 요청한 콘텐츠를 화면에 표시하는 역할을 한다. 예를 들어 HTML 파일을 요청하면, HTML과 CSS를 파싱하여 화면에 표시한다.
   파이어폭스의 게코, 크롬과 사파리의 웹킷 등이 있다.

4. 통신
   통신은 http 요청과 같은 네트워크 호출을 다루는 부분이다.

5. 자바스크립트 해석기
   말그대로 자바스크립트 코드를 분석하고 실행하는 역할을 한다.

6. UI 백엔드
   콤보박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

7. 자료저장소
   자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 저장할 필요가 있다.

렌더링 엔진

1. 렌더링 엔진

렌더링 엔진의 역할은 요청받은 html과 xml 문서와 이미지를 화면에 표시하는 것이다.

2. 렌더링 엔진 종류

-사파리, 크롬 : 웹킷 사용
-파이어폭스: 게코 사용

3. 렌더링 엔진의 동작 과정

1. 렌더링 엔진은 먼저 html을 파싱하여 콘텐츠 트리 내에서 태그를 DOM 노드로 변환한다. 그 후, CSS파일과 스타일 요소도 파싱하여 스타일 정보를 얻어낸다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라는 것을 만든다.
2. 렌더 트리는 색상 또는 면적 같은 시각적 속성을 가지고 있는데, 정해진 순서대로 화면에 표시된다.
3. 랜더 트리 생성 후 배치가 시작되는데, 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 말한다.
4. 마지막으로 UI 백엔드에서 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이 있다.

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

3-1. 웹킷과 게코의 동작 과정

웹킷과 게코에서 사용하는 용어는 조금씩 다르지만 전체적인 동작과정은 거의 동일하다.

파싱과 DOM트리 구축

1. 파싱이란?

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

2. 문법

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

3. 파서와 어휘 분석기 조합

• 어휘 분석기: 자료를 토큰(인간의 언어에서는 '단어'와 비슷한 뜻으로 생각하면 된다)으로 분해하는 역할을 한다.
• 파서: 구문규칙에 따라 파싱트리를 생성하는 역할을 한다.

파서는 어휘 분석기로부터 토큰을 받아와 구문 규칙에 맞는지 파악하고, 맞으면 토큰에 해당하는 노드가 파싱트리에 추가된다. 토큰이 구문 규칙에 맞지 않으면, 저장해두었다가 맞는 규칙이 나올때까지 요청한다. 끝까지 토큰에 맞는 규칙이 나오지 않으면, 구문 오류로 처리한다.

4. 변환

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

5. html 파싱

5-1. html은 문맥 자유 문법이 아니다.

html은 파싱하기 어렵고, 전통적인 구문 분석이 불가능하기 때문에 문맥 자유 문법이 아니라고 얘기한다.
그 이유는 html이 웹 제작자의 실수를 눈감고 넘어가주는 비교적 너그럽고 유연한 특징을 가지고 있기 때문이다. html은 이러한 특징 때문에 인기 있지만, 동시에 파싱하기 어려운 단점도 가지게 되었다.

6. DOM

파싱 트리는 DOM요소와 속성 노드의 트리이다. DOM은 document object model의 줄임말로, HTML 문서의 객체 모델이며, 자바스크립트와의 연결 지점이 된다.
트리가 DOM 노드를 포함한다고 말하는 것은 DOM 접점의 하나를 실행하는 요소를 구성한다는 의미다. 브라우저는 내부의 다른 속성들을 이용하여 이를 구체적으로 실행한다.

참고자료
https://d2.naver.com/helloworld/59361
브라우저는 어떻게 동작하는가?/ 2012.05.18 / NAVER D2