[TIL] Browser

1. Browser의 주요 기능

• 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
• 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다.

• 웹 브라우저가 웹 서버에 웹 페이지 요청을 하면 웹 서버는 웹 페이지 응답을 한다.
• 서버가 브라우저에게 전달한 응답인 HTML 문서를 브라우저는 읽어들이고 해석한 후 사용자(client)에게 보여준다.
• HTML, CSS를 해석하는 구체적인 내용들은 모두 W3C, World Side Web Consortium에 의해 관리되고 유지된다.

2. Browser의 UI

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

  표준 명세서가 없음에도 불구하고 수년간 서로의 장점을 모방하면서 현재에 이르게 된 것

3. Browser의 기본 구조

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

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하는 것이 주목할만하다. 각 탭은 독립된 프로세스로 처리된다.

• 이 중 가장 핵심적인 역할을 담당하는 렌더링 엔진의 경우 사용자가 요청해서 웹 서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성한다.
• 렌더링 엔진은 여러 개의 인스턴트를 한 번에 구동할 수 있다.
• 서로 다른 브라우저는 기본적으로 다른 렌더링 엔진을 사용하는데, 인터넷 익스플로러는 Trident, FireFox는 Gecko, 사파리는 Webkit, 구글 크롬과 오페라 브라우저는 Webkit의 일종인 Blink를 사용. Webkit은 오픈소스 렌더링 엔진으로 원래 리눅스 플랫폼에 사용되었다.

4. 렌더링 엔진 작동 방식

렌더링 엔진은 웹 서버로부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러온다. 그리고 아래와 같은 기본적인 flow를 거친다.

1. HTML 파싱 후 DOM tree를, CSS 파싱 후 CSS tree를 생성
2. Dom tree와 CSS tree가 조합된 Render tree 생성. Render tree는 화면에 어떻게 표현될지에 대한 정보가 포함되어 있다.
3. Painting 과정을 통해 화면에 정보가 표시된다.

1. HTML 파싱 후 DOM tree 생성

• 렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서(source code)를 파싱하여 각 요소들을 DOM tree(contents tree)의 각 DOM 노드들로 전환한다.

• DOM이란 Document Object Model의 준말로 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것. 당연히 HTML 문서의 각 마크업과 DOM의 각 요소는 1:1 매칭

• HTML, body 부모 태그 안에 단락을 나타내는 p 태그, 한 요소를 나타내는 div 태그가 자식 태그로 존재함. 이 코드를 Dom tree로 전환하면
  

2. Render tree 생성하기

• HTML 문서들을 파싱하여 Dom tree를 구성한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 Render tree를 만든다. Dom tree가 웹 상에 나타날 내용(contents)을 구성한다면 Render tree는 시각적 요소, 어떻게 나타날지 그 스타일을 지정

• Render tree는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성. 그 정사각형들은 스크린에 맞는 순서대로 정렬되어야 함

• Render tree 각각의 정사각형에 해당하는 Renderer들은 Dom tree 요소들에 적용되지만 1:1 관계가 성립되는 것은 아니다.

• 시각적이지 않은 DOM 요소들은 Render tree에 삽입될 수 없다. 태그 안의 요소들은 화면에 나타나는 값들을 포함하지 않는다. 따라서 그 어떤 Renderer도 적용될 수 없다.

3. Painting

• Render tree가 만들어져 레이아웃이 구성되었다면, UI 백엔드가 동작하여 각 노드들을 정해진 스타일 및 위치 값대로 화면에 배치한다.
• 더 나은 UX를 위해 렌더링 엔진은 각 콘텐츠를 가능한한 빨리 스크린에 띄워야 한다. 따라서 모든 HTML 요소들을 렌더링 엔진으로 넣어서 한 번에 출력하는 것이 아니라 일부 콘텐츠는 먼저 트리 과정을 거쳐 스크린에 나타나고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들어오는 순차적인 방식으로 입출력이 진행된다.