이 글은 이스라엘 개발자 탈리 가르시엘이 게시한 "How Browsers Work: Behind the scenes of modern web browsers"라는 글을 바탕으로 정리한 글입니다. 가르시엘은 millions 단위나 되는 C++ 랜더링 엔진 소스코드를 직접 분석하면서 어떻게 웹 브라우저가 동작하는지 파악하였다고 합니다.
웹 브라우저가 무엇인가?
웹 브라우저는 서버에서 받은 HTML, CSS, Javascript 파일을 받아서 브라우저 내부 "랜더링 엔진"의 Parser(파서)를 통해
문서들을 Parser tree로 만들고 순서대로 화면에 배치합니다.
웹 브라우저의 구조
1. User Interface : URL을 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 새로고침 버튼, 중지 버튼, 북마크 메뉴.
2. Browser engine : User Interface와 Rendering engine 사이에서 동작을 제어.
3. Rendering engine : 요청 받은 파일을 파싱하고 화면에 보여주는 역할.
4. Networking : HTTP request를 보낼 때 필요한 플랫폼과 독립적인 인터페이스.
5. Javascript Interpreter : 싱글 쓰레드 언어인 자바크크립트를 실행해주는 실행기.
이 글에서는 다양한 브라우저 컴포넌트 중에서 랜더링 엔진을 위주로 알아보기로 한다.
Rendering engine
기본적으로 웹 브라우저마다 서로 다른 랜더링 엔진을 사용한다. Firefox는 Gecko를 Safari, Chrome은 Webkit을 사용한다고 한다.
랜더링 엔진의 주 역할은 Networking layer에서 파일을 받는 것부터 시작한다.
그리고 HTML document를 파싱하기 시작하여 element를 "content tree"라 불리는 DOM 노드로 변환한다. 뿐만 아니라 외부 CSS 파일과 스타일 요소와 같은 style data도 파싱합니다. (CSSDOM)
랜더 트리에서 각 노드는 dimenstion, color와 같은 시각적 attribute를 가지고 있는 사각형을 포함합니다.
랜더 트리를 만든 후에는 각 노드에 대한 배치(layout) process를 거치는데, 이는 각 요소가 화면에 나타나야할 정확한 좌표를 계산하는 것입니다. 배치 위치가 결정된 후, 다음 단계는 painting 입니다. 여기서 각 노드는 스크린 위에 content를 표시합니다.
이러한 프로세스는 한번에 마술처럼 완성되는 것이 아니라 점진적으로 실행되는 것을 이해해야합니다.
더 나은 사용자 경험(UX)을 위해 렌더링 엔진은 가능한 빨리 스크린에 content를 표시하기를 원합니다.
그러므로 랜더링 엔진은 모든 HTML 파일이 파싱될 때 까지 기다리고, 스타일을 입혀서 layout을 계산하여 화면에 렌더링하는 것을
기다리지 않습니다. 대신 먼저 완성된 DOM tree를 화면에 랜더링하고 이 process를 나머지 contents에 대하여 계속 실행합니다.
이것이 렌더링 엔진입니다. 요약하자면 문서를 파싱(parse)하고 렌더 트리를 만들어서 화면에 paint 합니다.
그렇다면 대체 어떻게 문서를 파싱하는것인가 궁금해집니다.
Parser
파싱은 랜더링 엔진 내부에서 매우 중요한 process입니다. 더 깊게 공부할 필요가 있습니다.
어휘 분석(lexical analysis), 구문 분석(syntax analysis).
Parsing은 다음과 같이 2개의 sub processes로 나눌 수 있습니다.
어휘 분석은 소스 코드를 토큰으로 쪼개는 작업입니다. 토큰이란 언어에서 의미를 갖고 있는 조각의 모음입니다. 사전에 있는 단어라고 생각하면 쉽습니다. 구문 분석은 구문 규칙을 적용하는 작업입니다.
그럼 이제 Parser의 역할을 정의할 수 있습니다. Parser는 2가지 컴포넌트로 이뤄져있는데. 하나는 인풋을 유효한 토큰으로 쪼개는 컴포넌트이고 나머지 하나는 얻어낸 토큰을 syntax rule에 따라 분석해서 오류가 나지 않으면 parse tree를 만드는 역할을 하는 컴포넌트로 이뤄져있다.
이제 HTML 소스 코드를 parse tree로 만드는 parsing의 예시를 들어볼 텐데,
다음 글에서 파싱에 대한 추가 설명과 함께 정리하겠다.
그리고 다음 블로그는 Figure 1에서 5번째 컴포넌트인 자바스크립트 인터프리터에 대해서도 다뤄볼 예정이다.
www.html5rocks.com/en/tutorials/internals/howbrowserswork/
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
In this comprehensive primer, you will learn what happens in the browser between when you type google.com in the address bar until you see the Google page on the browser screen.
www.html5rocks.com
'웹 프론트 개발' 카테고리의 다른 글
| Parcel로 모듈 번들러 이해해보기 (0) | 2021.01.16 |
|---|---|
| Web speech API (Speech recognition api) (0) | 2020.12.27 |
| Typescript 사용해보기 (0) | 2020.12.21 |