브라우저의 동작 원리를 이해한다.
브라우저의 주요 기능
브라우저의 주요 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것이다.
브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
브라우저의 기본 구조
- 사용자 인터페이스
- 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
- 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 렌더링 엔진
- 웹 서버로부터 응답 받은 내용을 UI 상에 나타냄
- Gecko, Webkit 등이 있음
- 네트워크
- HTTP 요청과 같은 네트워크 호출에 사용됨
- 자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행
- UI 백엔드
- UI 구동을 가능하게 해줌
- 자료 저장소
- 쿠키같은 종류의 자원을 저장하는 웹 데이터베이스
렌더링 엔진의 동작 과정
이 중 가장 핵심적인 역할을 담당하는 렌더링 엔진의 경우 사용자가 요청해서 웹서버가 응답한 HTML 문서를 HTML과 CSS로 파싱해서 화면을 구성한다.
기본적인 flow는 아래와 같다.
- HTML 파싱 후 DOM 트리 만들기
- 렌더 트리 만들기
- 렌더 트리 배치
- 렌더 트리 그리기
이 과정들은 점진적으로 진행된다. 렌더링 엔진은 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다. 이는 좀 더 나은 사용자 경험을 위한 것이다.
1. HTML 파싱 후 DOM 트리 만들기
렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서를 파싱하여 각 요소들을 DOM 트리의 DOM 노드들로 전환한다.
DOM이란 Document Object Model로 마크업 형태의 HTML 문서를 Object 모델의 형태로 바꿔놓은 것이다. DOM은 마크업과 1:1의 관계를 맺는다.
CSS도 마찬가지로 파싱하여 CSSOM 트리를 구축한다.
2. 렌더 트리 만들기
DOM 트리가 구축이 되는 동안 브라우저는 렌더 트리를 만든다. 렌더 트리는 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 것이다.
렌더 트리와 DOM은 1:1 대응 관계가 아니다.
시각적으로 보이지 않는 HTML의 head 태그, CSS의 display: "none", script 태그, meta 태그 등 이러한 요소들은 제외된다. 즉, 렌더 트리는 페이지를 렌더링하는데 필요한 노드만 포함한다.
DOM 트리가 웹상의 내용을 담당한다면 렌더 트리는 각 노드의 레이아웃을 계산한다. 그리고 표시 되는 각 노드에 대해서 일치하는 CSSOM 규칙을 찾아 적용한 후 노드를 컨텐츠 및 계산된 스타일과 함께 내보낸다.
3. 렌더 트리 배치
지금까지 표시할 노드와 해당 노드의 스타일을 계산했다. 하지만 생성된 렌더 트리 노드들은 브라우저의 viewport 내에서 정확한 위치와 크기를 계산하지 않았다. 이것의 역할을 바로 렌더 트리 배치에서 진행한다.
viewport란 그래픽이 표시되는 브라우저의 영역, 크기를 말한다.
viewport는 모바일, PC, 브라우저의 창의 크기에 따라 달라진다. viewport 크기에 따라 노드들의 크기와 위치를 계산하는 것이 렌더 트리 배치에서 하는 일이다.
4. 렌더 트리 그리기
렌더 트리가 만들어져 레이아웃이 구성되었다면, UI 백엔드가 동작하여 실제 픽셀값을 채워 넣게 된다. 이 때 텍스트, 색, 이미지 등 효과 등이 모두 처리되어 그려진다.
자바스크립트 엔진
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.
제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src 속성에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다.
자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.
이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다.
따라서 body 요소의 가장 아래에 자바스크립트를 위치시키는 것이 좋다. 그 이유는 다음과 같다.
- HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.
