학습 내용
브라우저에서 url을 입력했을 때 어떤 과정을 거치는지 살펴봤다. 브라우저는 크게 기능 별로 분류하지만 7요소로 나눠볼 수 있다.
-
User Interface
사용자가 브라우저에서 뒤로가기 앞으로 가기등의 사용자와 상호작용을 할 수 있는 부분을 말한다. -
Rendering Engine
화면에 보이는 웹 페이지를 렌더링 해주는 부분을 말한다. -
Browswer Engine
User Interface와 Rendering Engine을 연결해주는 부분을 말한다. -
Networking
네트워크의 연결에 필요한 부분을 담당한다. -
Javascript Interpreter
자바스크립트 코드를 해석하여 동작하는 부분을 말한다. -
UI backend
태그들의 기본적인 UI 스타일들이 담겨있는 부분을 말한다. -
Data Persistance
쿠키나 localstorage 와 같이 저장을 담당하는 부분을 말한다.
여기서 Rendering Engine이 화면에 웹페이지에 접근하는 부분을 살펴봤다.
DOM Tree
응답으로 html 파일을 다운로드 받으면 브라우저의 Rendering Engine은 html을 파싱하게 된다. html의 코드들을 분석해서 어떤 의미인지를 html 버전에 맞게 이 코드는 어떤 태그가 열리는 의미고 닫히는 의미인지를 토큰에 담게 된다. 이런 토큰들을 만들어두고 렉싱 과정을 거치면서 각 토큰이 가지는 속성과 규칙들을 노드 객체로 만들게 된다. 이 노드 객체들을 상하위의 관계로 나타낸 것이 DOM TREE이다.
DOM은 Document Object Model로 문서를 노드 객체로 구성한 모델이다. 객체로 형성 되어있기 때문에 자바스크립트가 이를 통해 HTML 요소를 동적으로 제어할 수 있게 된다.
CSSOM Tree
html 파일의 head를 파싱할 때 css 파일도 다운 받게 되는데 있때 css 파일도 파싱을 하게 된다. 이때 css 파일도 각 선택자별로 토큰에 담기게 되고 렉싱과정으로 노드 객체로 변환되게 된다. 이 노드 객체도 상하위 관계로 나타낸 것이 CSSOM TREE이다.
Render Tree
html문서를 파싱하면서 DOM tree와 CSSOM tree를 만들고 나서 DOM tree의 각 요소를 전부순회하면서 CSSOM tree와 합쳐서 화면에 보여지는 요소만 골라 Render Tree를 생성한다. 이 단계에서 CSS 속성의 display: none 과 같이 화면에 나오지 않는 부분들은 제외된다. 이렇게 Render Tree를 완성하게 된다.
Layout
Render Tree를 완성하면 이를 바탕으로 화면에 어떻게 위치하면 되는지 계산하고 위치를 잡는 layout 절차를 거치게 된다. 이 때 각 요소들의 크기 위치 여백등의 요소를 현재 이 화면의 크기를 계산해서 위치를 정해놓는다. 이렇게 layout 단계가 끝나게 된다.
Paint
layout 단계가 끝나게 되면 paint 단계를 거치게 되는데 이때 각 위치에 맞는 스타일을 화면에 필셀로 그려주게 된다. 이렇게 픽셀 그려주는 과정을 마치면 사용자가 구성된 웹 페이지를 볼 수 있게 된다.
DOM tree 부터 Paint 까지의 과정을 Critical Rendering Path 라고 한다.
이런 과정을 통해서 웹 페이지가 브라우저 화면에 표현된다.
