본 글은 https://web.dev/howbrowserswork/을 읽고나서 학습 목적으로 작성함.
The browser's main functionality
브라우저의 가장 주요한 기능은 사용자가 요청한 소스를 서버에 전송하고 + 화면에 띄우는 일. 소스는 HTML문서, PDF, 이미지 등 다양한 것이 될 수 있다. 소스의 위치는 유저의 URI를 통해 명시된다.
👀 잠깐! URI는 뭐냐? URL이랑 비슷해보이는데..
URI : 식별자. 내 이름이다.
URL : 식별자+위치. 우리 집 주소, 즉 내가 있는 위치이다.
이 글에서 자세히 알아볼 건 아니라서 간단히만 쓰겠음. 추가 정보가 필요하시다면 https://www.elancer.co.kr/blog/view?seq=74 여기로.
브라우저의 소스에 대한 동작(requesting and display)은 HTML과 CSS 공식 규정에 따른다. 과거에는 브라우저들이 통일된 규정을 따르지 않아 혼란이 있었다. 하지만 현재에는 대부분이 공식규정을 따른다. 하지만 UI에 대한 공식 규정은 어디에도 없다.
그런데 특이하게도 대부분의 브라우저 UI는 공통 요소들을 가지고 있다.
- URL 주소 창
- 뒤로 이동, 앞으로 이동 버튼
- 북마크 옵션
- 새로고침 버튼
- 메인화면으로 이동할 수 있는 홈 버튼
이는 많은 세월동안 브라우저들의 유의미한 경험을 했고, 그와 동시에 서로에 대한 모방이 이루어졌기 때문이다.
The browser's high level structure
브라우저의 메인 컴포넌트들
- User Interface : 주소창, 새로고침 버튼 등
- The browser engine : UI와 rendering engine 사이에서 정보를 전달
- The rendering engine : 요청받은 소스를 화면에 출력
- Networking : HTTP 요청과 같은 네트워크 콜
- UI backend
- Javascript interpreter : 자바스크립트 코드를 parse하고 execute
- Data storage : 쿠키와 같은 데이터를 저장하기 위한 저장소
UI backend랑 Networking은 솔직히 잘 모르겠다.
Rendering engines
렌더링 엔진은 기본적으로 HTML이나 XML 문서를 화면에 출력한다. (만약 이외의 문서(PDF나 image등)를 출력하고 싶다면 플러그인이나 확장자(extension)을 사용한다.)
브라우저들은 고유의 렌더링 엔진을 가지고 있다. Firefox는 Gecko, Safari는 Webkit, Chrome과 Opera는 Blink.
🎈 렌더링 엔진 동작의 기본적 흐름 :
1. HTML을 분석(parse)하여 DOM tree 형성
2. Render tree 형성 : 색깔과 같은 시각적 요소를 담고 있음
3. 레이아웃 형성 : 각각의 요소가 어느 위치에 출력될지를 담음
4. 화면에 결과물 출력됨
중요한 건, 이 과정이 점진적이라는 것이다. 더 나은 사용자 경험을 위해, 렌더링 엔진은 가능한 한 빨리 요소들을 화면에 나타낸다. 절대로 모든 HTML 요소가 다 parse될 때까지 기다리지 않는다.
HTML parsing이 매우 중요한 과정이기에 조금 더 깊게 들어가본다.
렌더링 단계를 하나씩 살펴보자.
1. HTML을 분석(parse)하여 DOM tree 형성
parsing a document?
코드가 사용할 수 있는 구조로 문서를 해석하는 것. parsing의 결과는 문서의 구조를 담은 노드 트리이다.(parse tree or syntax tree)
parsing은 해석 대상이 되는 문서의 문법 규율을 따른다. 내가 parse 하는 모든 포맷은 context free grammer을 가진다.
HTML parser
우선 HTML은 context free grammer가 아니다.
다른 언어들에 비해 매우 작성자의 실수에 매우 관대하다. 이는 분명 장점이지만, 한편으로는 HTML로 공식적인 문법을 쓰기는 까다롭다.(너무 soft함)
정리하자면, HTML은 context free grammer가 아니기에 parsing되기가 좀 어렵다.
DOM : Document Object Model
object presentation of the HTML document 인 동시에
the interface of HTML elements to the outside world like JavaScript
DOM은 markup 과 거의 일대일 대응된다. 화면에 출력되는 태그 하나마다 각각의 DOM node가 있음.
작성중
